优化手段介绍
-
speed-measure-webpack-plugin： 在打包的过程中，能够精确的帮你分析出每一个步骤耗费的时间，然后我们可以针对时间比较长的部分专门做优化。 -
babel-loader 的 cacheDirectory：将转译的结果缓存到文件系统中 -
eslint-loader 的 cache： -
cache-loader：对sass-loader、postcss-loader、vue-loader做打包缓存，缩短打包的时间。 -
happypack：可以在打包的时候开启多线程打包 -
webpack-parallel-uglify-plugin：UglifyJsPlugin这个包的打包时间太长，可以使用webpack-parallel-uglify-plugin，开启多核同步压缩增加压缩的效率。 -
hard-source-webpack-plugin：为模块提供中间缓存步骤
总之，最有用的还是
webpack的terser-webpack-plugin缓存、babel-loader 的 cacheDirectory、eslint-loader 的 cache，cache-loader也会有作用，happypack、`webpack-parallel-uglify-plugin``基本没啥用
开始
初始启动
项目第一次启动需要耗时40s左右，第二次启动耗时30s左右，这是因为webpack的 terser-webpack-plugin 缓起作用
babel-loader 的 cacheDirectory` 和 eslint-loader 的 cache
然后开启babel-loader 的 cacheDirectory 和 eslint-loader 的 cache，初次启动耗时增加了几秒（猜测可能在创建缓存），再次启动耗时在15s左右
babel-loader 会将转译的结果缓存到文件系统中。cacheDirectory 默认值为 false。当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。如果设置了一个空值 (loader: 'babel-loader?cacheDirectory')或者 true (loader: 'babel-loader?cacheDirectory=true')，loader 将使用默认的缓存目录node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录。
{
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true',
include: [resolve('src'), resolve('test'), resolve('config'), resolve('node_modules/webpack-dev-server/client')],
},
eslint-loader开启缓存
{
test: /\.(js|vue)$/,
enforce: 'pre',
include: [resolve('src')],
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: true,
cache: true,
},
},
cache-loader
再启用 cache-loader，初次启动耗时增加了几秒，再次启动耗时11.5s
const cacheLoader = {
loader: 'cache-loader'
}
{
test: /\.vue$/,
use: [
cacheLoader,
{
loader: 'vue-loader',
options: vueLoaderConfig
}
]
},
const loaders = options.usePostCSS ? [cacheLoader, cssLoader, postcssLoader] : [cacheLoader, cssLoader]
happypack
开启多线程 happypack，并未提升速度，而且时间还增加了，不知道是不是我没全部使用多线程的原因。
4-3 使用 HappyPack · 深入浅出 Webpack (wuhaolin.cn)
将常用的 loader 替换为 happypack/loader?id=xxxx，并使用 id 指定创建的 HappyPack 插件
const HappyPack = require('happypack');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
exclude: path.resolve(__dirname, 'node_modules'),
},
]
},
plugins: [
new HappyPack({
// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
id: 'babel',
// 如何处理 .js 文件，用法和 Loader 配置中一样
loaders: ['babel-loader?cacheDirectory'],
// ... 其它配置项
}),
],
};
webpack-parallel-uglify-plugin
webpack-parallel-uglify-plugin 没有试，不确定
hard-source-webpack-plugin
文档：hard-source-webpack-plugin · GitCode
hard-source-webpack-plugin 在另外一个飞冰的项目中使用，编译一两分钟的项目节省了10s钟，并且和 speed-measure-webpack-plugin 不能一起使用
npm install --save-dev hard-source-webpack-plugin or yarn add --dev hard-source-webpack-plugin
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
context: // ...
entry: // ...
output: // ...
plugins: [
new HardSourceWebpackPlugin()
]
}
总结
webpack的 terser-webpack-plugin 缓存、babel-loader 的 cacheDirectory、eslint-loader 的 cache，cache-loader都会有作用，40s多的项目耗时减少了30s
网友评论