webpack打包文件体积过大，怎么提升速度？
借助webpack visualizer可视化插件，来看构建的情况。
这个问题要具体情况具体分析，看看打包文件有哪些块头比较大，哪些不常改变，最好列一个list，分类优化。下面提供8种方法，仅供参考。
一、区分配置文件，去除不必要的插件。
前端开发环境通常分为两种：开发环境和生产环境，我们可以创建两个配置文件来区分开发环境和生产环境。
webpack.config.dev.js，用于开发环境，需要日志输出，sourcemap，热模块替换，错误报告等。
webpack.config.prod.js，用于生产环境，需要做代码压缩，对文件名进行hash处理等。
//安装webpack-merge npm install --save-dev webpack-merge
//webpack.config.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
//webpack.config.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
//webpack.config.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.config.common.js');
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new UglifyJSPlugin({
sourceMap: true
})
]
});
在webpack.config.common.js中，我们设置了entry和output配置，并且在其中引入这两个环境公用的全部插件。在webpack.config.dev.js中，我们添加了推荐的devtool（强大的 source map）和简单的devServer配置。在webpack.config.prod.js中，我们引入了UglifyJSPlugin。
修改package.json文件
"scripts": {
"dev": "webpack-dev-server --open --config webpack.config.dev.js",
"prod": "webpack --config webpack.config.prod.js"
}
二、合理使用CommonsChunkPlugin插件，提取公用代码。
该方法适用于开发环境和生产环境，具体用法在下面有介绍。
三、通过externals配置来引用外部文件的方式，提取第三方库。
{
externals: {
'react': 'React'
}
}
<script src="//cdn.com/vue.min.js"></script> <script src="/build/bundle.js"></script>
该方法适用于生产环境。
四、利用DllPlugin和DllReferencePlugin预编译资源模块，提取第三方库。
const vendors = [
'vue','vue-router',
// ...其它库
];
module.exports = {
output: {
path: 'build',
filename: '[name].js',
library: '[name]'
},
entry: {
"lib": vendors
},
plugins: [
new webpack.DllPlugin({
path: 'manifest.json',
name: '[name]',
context: __dirname
})
]
};
该方法适用于开发环境和生产环境。
五、压缩代码
使用tree shaking，即先用es6语法import，export，再引入删除引用代码的压缩工具UglifyJsPlugin。
new webpack.optimize.UglifyJsPlugin({
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
compress: {
//在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
//用于压缩的时候去除log
drop_debugger: true,
drop_console: true,
//内嵌定义了但是只用到一次的变量
collapse_vars: true,
//提取出现多次但是没有定义成变量去引用的静态值
reduce_vars: true
}
})
加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。如果服务器端可以开启gzip压缩，优化的效果更明显。
另外，可以通过webpack-parallel-uglify-plugin来提升压缩速度，原理是采用多核并行压缩的方式提升速度。
let ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
let os = require('os');
new ParallelUglifyPlugin({
workerCount: os.cpus().length,
cacheDir: '.cache/',
uglifyJS: {
output: {
comments: false
},
compress: {
warnings: false
}
}
})
该方法适用于生产环境。
var HappyPack = require('happypack');
const os = require('os');
const HappyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
//启动线程池
let happyPackConfig = {
plugins: [
new HappyPack({
id:'jsx',
threadPool: HappyThreadPool,
cache: true,
loaders: ['babel-loader']
})
]
}
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'HappyPack/loader?id=jsx'
}
}
七、代码分割
分离代码，实现缓存资源和并行加载资源。
对于大型app而言，将所有代码都放在一个文件中是不高效的，尤其是一些代码块只要某些情况下才需要加载。webpack有一个特性，就是能够对项目进行代码分割。代码分割不只是提取通用代码放入可分享的块，更重要的是可以将代码分割成按需加载的块。代码分割可选择，可定义分割点，下面介绍几种分割代码的方法。
1、entry
当项目多入口点时，必须改写默认的output.filename选项，否则每个入口点都会写入相同的文件。
A、多个入口文件，打包在一起；
'use strict';
const webpack = require("webpack");
module.exports = {
context: __dirname + "/src",
entry: {
app: ["./file1.js", "./file2.js", "./file3.js"]
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js"
}
};
打包结果：所有文件会按数组顺序一起打包到dist/app.bundle.js文件中。
B、多个入口文件，分开打包。
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
file1: "./file1.js",
file2: "./file2.js",
file3: "./file3.js"
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
打包结果：dist/file1.bundle.js、dist/file2.bundle.js、dist/file3.bundle.js。
2、CommonsChunkPlugin插件
防止重复，移除重复的依赖模块。
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
file1: "./file1.js",
file2: "./file2.js",
file3: "./file3.js"
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' // 指定公共bundle的名称。
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
3、动态import
ES2015模块加载规范定义了import()方法来运行时动态地加载ES2015模块，webpack2将import()作为分割点并将被请求的模块放到一个单独的chunk中，import()接收模块名作为参数，并返回一个Promise。
//webpack.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
})
],
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
// src/index.js
function getComponent() {
return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}).catch(error => 'An error occurred while loading the component');
}
getComponent().then(component => {
document.body.appendChild(component);
});
在注释中使用了webpackChunkName，这样做会导致我们的bundle被命名为lodash.bundle.js，而不是[id].bundle.js 。
4、commonjs的require.ensure
require.ensure(dependencies, callback);
require.ensure方法确保回调时，dependencies里的每个依赖都会被同步的引入，require作为参数传递到回调函数中。require.ensure只加载模块，并不执行。
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});
5、AMD的require
reuqire(dependices, callback);
调用时，所有依赖都被加载，callback函数中能得到依赖暴露出来的对象。AMD的require加载并执行模块，在webpack中，模块由左向右执行，允许省略回调函数。
require(["module-a", "module-b"], function (a, b) {// ...})
6、按需加载
像d3，echarts，lodash，antd，比较大，没必要全部加载。
let d3 = Object.assign({},
require("d3-selection"),
require("d3-transition"),
require("d3-shape")
);
//为d3.event加上get方法，获取d3Selection.event
Object.defineProperty(d3,"event", {get: function() { return d3Selection.event; }});
// 引入echarts主模块
var echarts = require('echarts/lib/echarts');
//引入柱状图
require('echarts/lib/component/bar');
//引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
//基于准备好的dom，初始化echarts
var myChart = echarts.init(document.getElementById('main'));
//绘制图表
myChart.setOption({
title: { text:'走向社会'},
tooltip:{},
xAxis:{ data:['2013年','2014年','2015年','2016年','2017年','2018年']},
yAxis: {},
series: [{
name: '技术积累',
type: 'bar',
data: [5,8,11,15,19,23]
}]
})
## 安装lodash相关插件 cnpm i -S lodash-webpack-plugin babel-plugin-lodash
//配置webpack.config.js
var LoashModuleReplacementPlugin = require('lodash-webpack-plugin');
{
...,
plugins: [
...,
new LodashModuleReplacementPlugin({
'collections': true,
'shorthands': true
})
]
}
//在.babelrc中增加lodash配置
{
"plugins": [..., "lodash"]
}
//引用一次，即可调用任意函数，而不会完全打包 import _ from 'lodash'; _.add(1,2); //打包时，只会引入add函数
八、缓存不常修改的库文件
不要在开发环境下使用[chunkhash]，因为这会增加编译时间。将开发和生产模式的配置分开，并在开发模式中使用[name].js的文件名，在生产模式中使用[name].[chunkhash].js文件名。
1、output.filename
var path = require("path");
var webpack = require("webpack");
var ChunkManifestPlugin = require("chunk-manifest-webpack-plugin");
var WebpackChunkHash = require("webpack-chunk-hash");
module.exports = {
entry: {
vendor: "./src/vendor.js",
main: "./src/index.js"
},
output: {
path: path.join(__dirname, "build"),
filename: "[name].[chunkhash:8].js",
chunkFilename: "[name].[chunkhash:8].js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ["vendor", "manifest"],
minChunks: Infinity
}),
new webpack.HashedModuleIdsPlugin(),
new WebpackChunkHash(),
new ChunkManifestPlugin({
filename: "chunk-manifest.json",
manifestVariable: "webpackManifest"
})
]
};