如果vue项目打完包,js文件夹里面只有一个app.js的话,就会在首页加载所有的js代码。如果需要分包打包的话,可以执行以下代码,这样的话每个页面就只会加载对应的js文件,减少首页的负担
npm install uglifyjs-webpack-plugin --save-dev
configureWebpack: (config) => {
// 引入uglifyjs-webpack-plugin
let UglifyPlugin = require('uglifyjs-webpack-plugin');
if (process.env.NODE_ENV == 'production') {
// 为生产环境修改配置
config.mode = 'production'
// 将每个依赖包打包成单独的js文件
let optimization = {
minimizer: [new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})]
}
Object.assign(config, {
optimization
})
} else {
// 为开发环境修改配置
config.mode = 'development'
}
}