unipapp 解决无法编译sass_Webpack 4编译速度优化踩坑

最新推荐文章于 2024-08-05 14:35:30 发布

weixin_39902598

最新推荐文章于 2024-08-05 14:35:30 发布

阅读量213

点赞数

文章标签： unipapp 解决无法编译sass

本文链接：https://blog.csdn.net/weixin_39902598/article/details/111341369

版权

本文介绍了如何通过speed-measure-webpack-plugin检测Webpack 4的打包速度，并尝试使用thread-loader优化编译过程。在实践中，发现thread-loader对eslint-loader的优化效果不明显，而在sass-loader部分也遇到版本兼容问题和配置陷阱。最终结论强调，是否使用thread-loader需根据实际情况对比，且需关注loader的复杂性和模块数量。

摘要由CSDN通过智能技术生成

一，目标

今天打算做一些webpack打包编译的速度优化。

二，准备工作

当前webpack版本 4.43.0

首先，既然是做速度优化，就得先知道当前的编译速度是多少。

推荐这个插件：speed-measure-webpack-plugin

GitHub地址：

https://github.com/stephencookdev/speed-measure-webpack-plugingithub.com

npm i -D speed-measure-webpack-plugin

用法也很简单，官方文档里也有

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap(webpackConfig);

然后我们再运行一下build命令

终端里会出现上面这张图，还是蛮清晰的，每个模块的编译时间，包括plugin的执行时间，都会有，报红的时间都是超过10s的

（补充：这里的modules with no loaders实际上就是无需编译浏览器可识别的js）

OK，既然已经有了时间了，那我开始优化了。

三，确定方案

Google了一下，目前有两种主流方案：

happypack和thread-loader

先来看一下happypack，这里是GitHub地址

https://github.com/amireh/happypackgithub.com

看了官方文档后，果断放弃，为什么？

噗呲，作者都推荐了thread-loader了，那我还有啥好说的，直接上链接：

webpack-contrib/thread-loadergithub.com

npm install --save-dev thread-loader

按照文档一通配置，我先来针对eslint-loader试一下效果

 {
                enforce: 'pre',
                test: /.(js|jsx)$/,
                exclude: [
                    /node_modules/
                ],
                include: [
                    path.resolve(__dirname, '../src')
                ],
                use: [
                    {
                        loader: "thread-loader"
                    },
                    {
                        loader: 'eslint-loader'
                    }
                ]
            },

其实就是放到需要优化的loader之前

再次执行

这。。。。。。

重新加一些参数

{
                enforce: 'pre',
                test: /.(js|jsx)$/,
                exclude: [
                    /node_modules/
                ],
                include: [
                    path.resolve(__dirname, '../src')
                ],
                use: [
                    {
                        loader: "thread-loader",
                        options: {
                            workerParallelJobs: 50,
                            poolParallelJobs: 50
                        }
                    },
                    {
                        loader: 'eslint-loader'
                    }
                ]
            },

再次执行

好像相比上次好了一点点，但是竟然还是没有去掉的时候速度快。

不过确实webpack编译时间每次都不一样，所以要多编译几次，然后看大致的平均时间：

我经过多次编译对比之后发现，好像确实是不添加的快。。

看到官方的这条提示，我明白了，原来真的不是所有的loader加了这个都会变快的，有的真的甚至会变慢，所以还是需要亲自编译观察对比才行。

接着我来试一下sass-loader部分：

{
                test: /.(scss|css)$/,
                use: [
                    {
                        loader: "thread-loader",
                        options: {
                            workerParallelJobs: 50,
                            poolParallelJobs: 50
                        }
                    },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: false,
                            modules: {
                                localIdentName: config.defaultLocalIdentName
                            }
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            },

老样子，将这个thread-loader放到所有的样式loader的最前面，再次编译