新开发网站,北京制作app,保险网站源码,赣州91人才网赣州招聘信息背景
最近在做公司内部的小程序脚手架#xff0c;为了兼容老项目和旧项目#xff0c;做了vue2taro,vue3taro两个模板#xff0c;发现terser-webpack-plugin在vue2和vue3中的使用方式并不相同#xff0c;同样的配置在vue3webpack5中生效#xff0c;但是在vue2webpack4中就…背景
最近在做公司内部的小程序脚手架为了兼容老项目和旧项目做了vue2taro,vue3taro两个模板发现terser-webpack-plugin在vue2和vue3中的使用方式并不相同同样的配置在vue3webpack5中生效但是在vue2webpack4中就不生效
vue3模板的解决办法在taro小程序terser-webpack-plugin插件不生效 已经做了说明本文主要介绍在vue2webpack4中的解决办法。
遇到的问题
首先说明下前提关于微信小程序我在package.json里面配置了四个命令如下 build:weapp: taro build --type weapp, //生产环境prod:weapp: cross-env NODE_ENVproduction npm run build:weapp -- --watch, //生产环境热编译dev:build:weapp: cross-env NODE_ENVdevelopment npm run build:weapp, //测试环境非热编译dev:weapp: cross-env NODE_ENVdevelopment npm run build:weapp -- --watch, //测试环境热编译通过查看taro源码已经知道在生产环境的时候源码里面会自动使用压缩
所以只需要在测试环境的时候做配置即可接着按照官网做了以下配置
// config/dev.js
module.exports {mini: {webpackChain: (chain, webpack) {chain.merge({plugin: {install: {plugin: require(terser-webpack-plugin),args: [{terserOptions: {compress: true, // 默认使用terser压缩keep_classnames: true, // 不改变class名称keep_fnames: true, // 不改变函数名称},},],},},})},},
}运行
npm run dev:weapp发现确实起到了压缩效果demo编译后的体积由836kb变成了334kb 以为到这一步就大功告成啦no,no,no,才刚刚开始~哈哈哈哈接下来意想不到的发生啦…
当然如果你不需要配置dev:build:weapp这条命令当我没说…
运行
npm run dev:build:weapp发现并没有打包成功提示这个文件和已有的文件冲突
然后开始排查错误看了文档中附的这个链接《编写插件将 Taro 编译打包耗时缩短至三分之一》。 删除前面的配置按照这个文档进行配置(不做详细介绍文档里面都有)发现报如下错误 在minifyMainPackage.js里面打印minimizers发现已经存在terser插件,如果再创建就会报错
//minifyMainPackage.js
const TerserPlugin require(terser-webpack-plugin)module.exports (ctx) {ctx.modifyWebpackChain(args {const chain args.chainconst minimizers chain.optimization.get(minimizer) || []console.log(minimizers,minimizers).....})
}此时运行如下却发现并不会报错
npm run dev:weapp但是minimizers打印出来的是[]
由此可以看出dev:build:weapp的时候terser已经存在无需重新添加但是dev:weapp的时候terser却不存在。
结合源码然后开始各种排查发现dev:build:weapp的时候虽然打印process.env.NODE_ENV出来的是development进入的是dev.js里面的逻辑但是在taro内部还是按照 production 添加了terser-webpack-plugin插件再次添加就会报错。
因此在minifyMainPackage.js加了一个判断判断插件存在就不再创建
附上完整代码
//minifyMainPackage.js
const TerserPlugin require(terser-webpack-plugin)module.exports (ctx) {ctx.modifyWebpackChain(args {const chain args.chainconst minimizers chain.optimization.get(minimizer) || []// 检查是否已存在TerserPlugin实例避免重复添加const hasTerser minimizers.some(minimizer {return minimizer.constructor.name TerserPlugin})//没有则创建if(!hasTerser){chain.optimization.minimize(true)chain.merge({optimization: {minimize: true,minimizer: [new TerserPlugin({test: /\.(?:[js]sx?|mjs)$/, // 一般匹配JavaScript和JSX文件根据需要调整parallel: true,minify: TerserPlugin.swcMinify,cache: true,extractComments: true,sourceMap: true,terserOptions: {parse: {ecma: 8,},compress: {ecma: 5,warnings: false,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,},output: {ecma: 5,comments: false,ascii_only: true,},},}),],},})}})
}
然后在dev.js进行引入
const path require(path)
module.exports {env: {NODE_ENV: development},defineConstants: {},plugins: [ path.resolve(__dirname, ./minifyMainPackage.js)],mini: {},h5: {}}
}
对啦记得安装插件呀~
npm install -D terser-webpack-plugin3.0.5大功告成啦~ 完结撒花
