建国电影院地址建国东路11号,宁波seo外包平台,没有做防注入的网站,深圳燃气公司招聘本文主要介绍如何在vuecli3生成的项目中#xff0c;打包输出时删除console.log和使用dllplugin#xff0c;并记录了配置过程中踩到的坑。 #xff08;本人水平有限#xff5e;希望大家多多指出有误的地方#xff09; 一、生产环境中删除console.log 在开发代码中写的conso…本文主要介绍如何在vuecli3生成的项目中打包输出时删除console.log和使用dllplugin并记录了配置过程中踩到的坑。 本人水平有限希望大家多多指出有误的地方 一、生产环境中删除console.log 在开发代码中写的console.log可以通过配置webpack4中的terser-webpack-plugin插件达成目的compress参数配置如下: module.exports {optimization: {minimizer: [new TerserPlugin({terserOptions: {compress: {warnings: false,drop_console: true,drop_debugger: true,pure_funcs: [console.log]},},}),],},
};
复制代码而vue/cli-service的配置源码也是使用了terser-webpack-plugin插件进行Tree Shaking以下是vue/cli-service/prod.js的源码 module.exports (api, options) {api.chainWebpack(webpackConfig {if (process.env.NODE_ENV production) {const isLegacyBundle process.env.VUE_CLI_MODERN_MODE !process.env.VUE_CLI_MODERN_BUILDconst getAssetPath require(../util/getAssetPath)const filename getAssetPath(options,js/[name]${isLegacyBundle ? -legacy : }${options.filenameHashing ? .[contenthash:8] : }.js)webpackConfig.mode(production).devtool(options.productionSourceMap ? source-map : false).output.filename(filename).chunkFilename(filename)// keep module.id stable when vendor modules does not changewebpackConfig.plugin(hash-module-ids).use(require(webpack/lib/HashedModuleIdsPlugin), [{hashDigest: hex}])// disable optimization during tests to speed things upif (process.env.VUE_CLI_TEST) {webpackConfig.optimization.minimize(false)} else {const TerserPlugin require(terser-webpack-plugin)const terserOptions require(./terserOptions)webpackConfig.optimization.minimizer([new TerserPlugin(terserOptions(options))])}}})
}
复制代码在 vue.config.js 中的 configureWebpack 选项提供一个对象会被 webpack-merge 合并入最终的 webpack 配置因此vue-cli3构建的项目中只需要修改terserOptions即可vue.config.js配置如下 module.exports {publicPath: /,outputDir: dist,devServer: {port: 8080,https: false,hotOnly: true,disableHostCheck: true,open: true,},productionSourceMap: false, // 生产打包时不输出map文件增加打包速度configureWebpack: config {if (process.env.NODE_ENV production) {config.optimization.minimizer[0].options.terserOptions.compress.warnings falseconfig.optimization.minimizer[0].options.terserOptions.compress.drop_console trueconfig.optimization.minimizer[0].options.terserOptions.compress.drop_debugger trueconfig.optimization.minimizer[0].options.terserOptions.compress.pure_funcs [console.log]}}
}
复制代码配置完成后使用 vue inspect --modeproduction output.js 命令审查项目的 webpack 配置optimization.minimizer的输出如下 optimization: {minimizer: [{options: {test: /\.m?js(\?.*)?$/i,chunkFilter: () true,warningsFilter: () true,extractComments: false,sourceMap: false,cache: true,cacheKeys: defaultCacheKeys defaultCacheKeys,parallel: true,include: undefined,exclude: undefined,minify: undefined,terserOptions: {output: {comments: /^\**!|preserve|license|cc_on/i},compress: {arrows: false,collapse_vars: false,comparisons: false,computed_props: false,hoist_funs: false,hoist_props: false,hoist_vars: false,inline: false,loops: false,negate_iife: false,properties: false,reduce_funcs: false,reduce_vars: false,switches: false,toplevel: false,typeofs: false,booleans: true,if_return: true,sequences: true,unused: true,conditionals: true,dead_code: true,evaluate: true,warnings: false, drop_console: true, drop_debugger: true, pure_funcs: [console.log]},mangle: {safari10: true}}}}],
}
复制代码到此完成删除console.log的配置接下来记录一下我踩到的坑 坑1在vue.config.js中直接使用terser-webpack-plugin后通过vue inpect审查发现新增的compress参数并没有直接进入原有的terserOptions而是minimizer数组新增了一个对象。这样导致vue-cli原有的terser-webpack-plugin配置失效。打包会以cache和parallel为false的配置下进行打包输出打包速度变慢因此后来采取直接修改terserOptions。 minimizer数组新增了一个对象 options: {test: /\.m?js(\?.*)?$/i,chunkFilter: () true,warningsFilter: () true,extractComments: false,sourceMap: false,cache: false, cacheKeys: defaultCacheKeys defaultCacheKeys,parallel: false,include: undefined,exclude: undefined,minify: undefined,terserOptions: {output: {comments: /^\**!|preserve|license|cc_on/i},compress: {warnings: false,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: false). Corresponds to --cache. cli-plugin-eslint使用eslint-loader的关键代码如下 api.chainWebpack(webpackConfig {webpackConfig.resolveLoader.modules.prepend(path.join(__dirname, node_modules))webpackConfig.module.rule(eslint).pre().exclude.add(/node_modules/).add(require(path).dirname(require.resolve(vue/cli-service))).end().test(/\.(vue|(j|t)sx?)$/).use(eslint-loader).loader(eslint-loader).options({extensions,cache: true, cacheIdentifier,emitWarning: options.lintOnSave ! error,emitError: options.lintOnSave error,eslintPath: resolveModule(eslint, cwd) || require.resolve(eslint),formatter:loadModule(eslint/lib/formatters/codeframe, cwd, true) ||require(eslint/lib/formatters/codeframe)})})
复制代码如果要终端不输出eslint的错误可以在vue.config.js配置lintOnSave: process.env.NODE_ENV ! production生产环境构建时禁用但是这样与在eslintrc.js的rules中配置no-console: process.env.NODE_ENV production ? error : off的目的自相矛盾。 那么是否有办法让eslint-loader在terser-webpack-plugin或者babel-plugin-transform-remove-console之后进行检测呢还是说配置了删除console.log就没必要配置no-console呢希望有大神能回答我这个疑惑 二、使用dllPlugin优化打包速度 网上已经有很多文章介绍dllPlugin的使用方法这里就不介绍dllPlugin的详细配置说明了。本文只介绍一下针对vue-cli3项目使用webapck-chain方式的配置代码所以就直接贴代码啦 新增webpack.dll.config.js代码如下 const path require(path)
const CleanWebpackPlugin require(clean-webpack-plugin)
const webpack require(webpack)module.exports {mode: production,entry: {vendor: [vue/dist/vue.runtime.esm.js, vuex, vue-router, element-ui],util: [lodash]},output: {filename: [name].dll.js,path: path.resolve(__dirname, dll),library: dll_[name]},plugins: [new CleanWebpackPlugin(), // clean-wepback-plugin目前已经更新到2.0.0不需要传参数pathnew webpack.DllPlugin({name: dll_[name],path: path.join(__dirname, dll, [name].manifest.json),context: __dirname})]
}
复制代码在vue.config.js添加DllReferencePlugin最终代码如下 const webpack require(webpack)
const AddAssetHtmlPlugin require(add-asset-html-webpack-plugin)
const path require(path)const dllReference (config) {config.plugin(vendorDll).use(webpack.DllReferencePlugin, [{context: __dirname,manifest: require(./dll/vendor.manifest.json)}])config.plugin(utilDll).use(webpack.DllReferencePlugin, [{context: __dirname,manifest: require(./dll/util.manifest.json)}])config.plugin(addAssetHtml).use(AddAssetHtmlPlugin, [[{filepath: require.resolve(path.resolve(__dirname, dll/vendor.dll.js)),outputPath: dll,publicPath: /dll},{filepath: require.resolve(path.resolve(__dirname, dll/util.dll.js)),outputPath: dll,publicPath: /dll}]]).after(html)
}module.exports {publicPath: /,outputDir: dist,devServer: {port: 8080,https: false,hotOnly: true,disableHostCheck: true,open: true,},productionSourceMap: false, // 生产打包时不输出map文件增加打包速度chainWebpack: config {if (process.env.NODE_ENV production) {dllReference(config)}},configureWebpack: config {if (process.env.NODE_ENV production) {config.optimization.minimizer[0].options.terserOptions.compress.warnings falseconfig.optimization.minimizer[0].options.terserOptions.compress.drop_console trueconfig.optimization.minimizer[0].options.terserOptions.compress.drop_debugger trueconfig.optimization.minimizer[0].options.terserOptions.compress.pure_funcs [console.log]}}
}
复制代码有3个地方需要说明一下 1、webpack.dll.config.js文件中的entry.vendor使用vue/dist/vue.runtime.esm.js作为vue的入口是根据vue inspect output.js的文件中resolve.alias决定的vue.runtime.esm.js还是vue.esm.js取决于vue create构建时的选择 resolve: {alias: {: /Users/saki_bc/bccgithub/vue-webpack-demo/src,vue$: vue/dist/vue.runtime.esm.js},
}
复制代码2、在开发环境中不使用dllPlugin是因为chrome的vue devtool是不能检测压缩后的vue源码使得没办法用vue devtool观察vue项目的组件和数据状态 3、add-asset-html-webpack-plugin插件必须在html-webpack-plugin之后使用因此这里要用webpack-chain来进行配置至于为什么html代表html-webpack-plugin是因为vue/cli-servide/lib/config/app.js里是用plugin(html)来映射的关键源码片段如下 const HTMLPlugin require(html-webpack-plugin)
webpackConfig.plugin(html).use(HTMLPlugin, [htmlOptions])
复制代码4、这里不使用在index.html里添加script标签的方式引入dll文件是因为当vue路由使用history模式并且路由配置首页重定向到其他url的情况下在首页刷新页面后dll文件会以重定向后的url的根目录引用导致报错找不到dll文件。 如dll的正确引用情况是http://www.xxx.com/vendor.dll.js刷新重定向后变成 http://www.xxx.com/xxx/vendor.dll.js即使在index.html使用绝对路径也是会出现这样的情况目前还不知道是不是html-webpack-plugin的bug 结语 这次优化实践仍然存在不少疑惑和且考虑的地方webpack的更新发展也越来越快vue-cli使用webpack-chain作为核心方式也增加了不少学习成本接下来还需要阅读相关源码发现项目中配置不合理的地方 也希望各位大家能分享一下使用webpack4过程中踩到的坑 相关文档 webpack-chain文档 add-asset-html-webpack-plugin文档 vue-cli配置源码 转载于:https://juejin.im/post/5c84b709e51d4578ca71dde4
