1.去除devtool选项
这只适用于开发环境,这会造成打包的文件往往有几M,所以在生产环境必须去除此配置。
2.分离CSS
安装插件:
npm install extract-text-webpack-plugin --save
var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
loaders:[
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
},
...
...
plugins: [
...
new ExtractTextPlugin("bundle.css")
]
3.使用webpack.optimize.UglifyJsPlugin插件压缩混淆JS代码
使用命令:webpack -p
在webpack.config.js文件的plugins数组里面添加及配置插件,具体配置参考UglifyJS2文档
new webpack.optimize.UglifyJsPlugin({
warnings: false,
compress: {
join_vars: true,
warnings: false,
},
toplevel: false,
ie8: false,
}),
4.切换到产品环境
在plugins中添加插件
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
打包时运行:
set NODE_ENV=production && webpack -p
5.分离第三方库
在plugins中加入
new webpack.optimize.CommonsChunkPlugin({
filename:"common.js",
name:"commons"
});
6.按需打包Lodash
使用Lodash时,往往只需要使用其中部分功能,但整个文件引入是不合理的,我们需要通过插件让Webpack按需引入模块。
配置webpack.config.js
var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var webpack = require('webpack');
module.exports = {
module: {
loaders: [{
loader: 'babel',
test: /\.js$/,
exclude: /node_modules/
}]
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime', 'lodash']
},
plugins: [
new LodashModuleReplacementPlugin,
new webpack.optimize.OccurrenceOrderPlugin,
new webpack.optimize.UglifyJsPlugin
]
}
7.异步加载模块
对于直接require或import的模块,Webpack的做法是把依赖的文件都打包在一起,造成文件很臃肿。
所以在写代码的时候要注意适度同步加载,同步的代码会被合成并且打包在一起。
异步加载的代码会被分片成一个个chunk,在需要该模块时再加载,即按需加载。
require.ensure([], function(require){
var list = require('./list');
list.show();
}, 'list');