vuecli3+webpack4优化实践（删除console.log和配置
dllPlugin）
本⽂主要介绍如何在vuecli3⽣成的项⽬中，打包输出时删除console.log和使⽤dllplugin，并记录了配置过程中踩到的坑。 （本⼈⽔平有限～希望⼤家多多指出有误的地⽅）
⼀、⽣产环境中删除console.log
在开发代码中写的console.log，可以通过配置webpack4中的插件达成⽬的，参数配置如下:
optimization: {
minimizer: [
new TerrPlugin({
terrOptions: {
compress: {
warnings: fal,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
},
},
}),
],
},
};
复制代码
⽽@vue/cli-rvice的配置源码也是使⽤了terr-webpack-plugin插件进⾏Tree Shaking，以下是@vue/cli-rvice/prod.js的源码
api.chainWebpack(webpackConfig => {
if (v.NODE_ENV === 'production') {
const isLegacyBundle = v.VUE_CLI_MODERN_MODE && !v.VUE_CLI_MODERN_BUILD
const getAstPath = require('../util/getAstPath')
const filename = getAstPath(
options,
`js/[name]${isLegacyBundle ? `-legacy` : ``}${options.filenameHashing ? '.[contenthash:8]' : ''}.js`
)
webpackConfig
.mode('production')
.devtool(options.productionSourceMap ? 'source-map' : fal)
.output
.filename(filename)
.chunkFilename(filename)
// keep module.id stable when vendor modules does not change
webpackConfig
.plugin('hash-module-ids')
.u(require('webpack/lib/HashedModuleIdsPlugin'), [{
hashDigest: 'hex'
}])
// disable optimization during tests to speed things up
if (v.VUE_CLI_TEST) {
webpackConfig.optimization.minimize(fal)
} el {
const TerrPlugin = require('terr-webpack-plugin')
const terrOptions = require('./terrOptions')
webpackConfig.optimization.minimizer([
new TerrPlugin(terrOptions(options))
])
}
}
})
}
复制代码
在 fig.js 中的 configureWebpack 选项提供⼀个对象会被 webpack-merge 合并⼊最终的 webpack 配置，因此vue-cli3构建的项⽬中只需要修改terrOptions即可，fig.js配置如下：
publicPath: '/',
outputDir: 'dist',
devServer: {
port: 8080,
https: fal,
hotOnly: true,
disableHostCheck: true,
open: true,
},
productionSourceMap: fal, // ⽣产打包时不输出map⽂件，增加打包速度
configureWebpack: config => {
if (v.NODE_ENV === 'production') {
config.optimization.minimizer[0].press.warnings = fal
config.optimization.minimizer[0].press.drop_console = true
config.optimization.minimizer[0].press.drop_debugger = true
config.optimization.minimizer[0].press.pure_funcs = ['console.log']
}
}
}
复制代码
配置完成后使⽤ vue inspect --mode=production > output.js 命令审查项⽬的 webpack 配置，optimization.minimizer的输出如下：
optimization: {
minimizer: [
{
options: {
test: /\.m?js(\?.*)?$/i,
chunkFilter: () => true,
warningsFilter: () => true,
extractComments: fal,
sourceMap: fal,
cache: true,
cacheKeys: defaultCacheKeys => defaultCacheKeys,
parallel: true,
include: undefined,
exclude: undefined,
minify: undefined,
terrOptions: {
output: {
comments: /^\**!|@prerve|@licen|@cc_on/i
},
compress: {
arrows: fal,
collap_vars: fal,
comparisons: fal,
computed_props: fal,
hoist_funs: fal,
hoist_props: fal,
hoist_vars: fal,
inline: fal,
loops: fal,
negate_iife: fal,
properties: fal,
reduce_funcs: fal,
reduce_vars: fal,
switches: fal,
toplevel: fal,
typeofs: fal,
booleans: true,
if_return: true,
quences: true,
unud: true,
conditionals: true,
dead_code: true,
evaluate: true,
warnings: fal,
drop_console: true,
drop_debugger: true,
pure_funcs: [
'console.log'
]
},
mangle: {
safari10: true
}
}
}
}
],
}
复制代码
到此完成删除console.log的配置，接下来记录⼀下我踩到的坑～
坑1：在fig.js中直接使⽤terr-webpack-plugin后，通过vue inpect审查发现新增的compress
参数并没有直接进⼊原有的terrOptions，⽽是minimizer数组新增了⼀个对象。这样导致vue-cli原有的terr-webpack-plugin配置失效。打包会以cache和parallel为fal的配置下进⾏打包输出，打包速度变慢，因此后来采取直接修改terrOptions。
minimizer数组新增了⼀个对象：
options: {
test: /\.m?js(\?.*)?$/i,
chunkFilter: () => true,
warningsFilter: () => true,
extractComments: fal,
sourceMap: fal,
cache: fal,
cacheKeys: defaultCacheKeys => defaultCacheKeys,
parallel: fal,
include: undefined,
exclude: undefined,
minify: undefined,
terrOptions: {
output: {
comments: /^\**!|@prerve|@licen|@cc_on/i
},
compress: {
warnings: fal,
drop_console: true,
drop_debugger: true,
pure_funcs: [
'console.log'
]
}
}
}
复制代码
坑2（未解决）：在给.eslintrc.js的rules配置了no-console的情况下，修改代码后的⾸次打包eslint-loader总会在终端上报 error: Unexpected console statement (no-console)，虽然打包过程中报错，但是最终的输出代码是没有console.log的；(使⽤babel-plugin-transform-remove-console删除console.log也会出现这种情况)
查看@vue/cli-plugin-eslint的源码发现eslint的cache属性为true，所以再次打包就不会对未修改的⽂件进⾏检测。
Eslint Node.js API对cache参数解释如下：
cache - Operate only on changed files (default: fal). Corresponds to --cache.
cli-plugin-eslint使⽤eslint-loader的关键代码如下：
