方法一:
区分第三方代码(vender)和业务代码(app)
DllPlugin DllReferencePlugin 这两个插件设置打包好的第三方代码不再打包
第一步: 在build文件中新建一个webpack.dll.config.js
第二部: 配置webpack.dll.config.js
const path = require('path');
const webpack = require('webpakc')
module.exports = {
entry:{
vue:['vue','vue-router'],
ui:['element-ui']
},
output:{
path:path.join(__dirname,'../src/dll/'), //新建一个目录,存放dll文件
filename:'[name].dll.js',
library:'[name]', // 怎么引用打包好的第三方库
},
plugins:[
new webpack.DllPlugin({
path: path.join(__dirname,'../src/dll/','[name]-manifest.json'), // 打包后的dll文件放在位置及名称
name:'[name]'
}),
// 混淆压缩
new webpack.optimize.UglifyJsPlugin()
]
}
第三步: 命令行打包: webpack –config build/webpack.dll.config.js
第四部: 在webpack.prod.conf.js中加入如下代码:
plugin:[
new webpack.DllReferencePlugin({
manifest: require('../src/dll/ui-manifest.json')
}),
new webpack.DllReferencePlugin({
manifest: require('../src/dll/vue-manifest.json')
})
....
]
方法二: 并行进行代码压缩混淆
插件: UglifyJsPlugin 压缩混淆代码
设置:paraller cache
// 修改webpack.prod.conf.js
plugins:[
new UglifyJsPlugin({
uglifyOptions:{
compress:{
warnings: false,
}
},
sourceMap: false,
parallel: true , // 并行处理打包文件
cache: true, // 使用缓存
})
]
方法三:
happyPack 将串行变为并行
happyPack.TheadPool 线程池
安装 : npm install happypack –save-dev
// 修改webpack.prod.conf
const HappyPack = require('happypack')
plugins:[
new HappyPack({
id:'vue',
loaders:[
{
loader:'vue-loader',
option:require('./vue-loader.conf')
}
]
})
//修改webpack.base.conf.js
{
test: /\.vue$/,
loader: 'happypack/loader?id=vue',
options: vueLoaderConfig
},
四: babel-loader
开启缓存: options.cacheDirectory
include/exclude: 规定打包的范围
//修改webpack.base.conf.js
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
// 修改include 减少babel-loader的处理范围
include: [resolve('src')]
//resolve('test'), 开发环境使用
//resolve('node_modules/webpack-dev-server/client') 开发环境使用
其他因素:
减少resolve
DevTool:去除sourcemap
cache-loader, // 将loader处理结果缓存下来
升级node,
升级webpack,