webpack打包性能优化

1. 使用 gzip 压缩打包后的 js 文件

这个方法优化浏览器下载时的文件大小（打包后的文件大小没有改变）

webpack.config.prod.js 中

var  CompressionWebpackPlugin  =  require('compression-webpack-plugin');
// 在 plugins 中添加
new  CompressionWebpackPlugin({ //gzip 压缩
	asset:  '\[path\].gz\[query\]',
	algorithm:  'gzip',
	test:  new  RegExp(
		'\\\.(js|css)$'  //压缩 js 与 css
	),
	threshold:  10240,
	minRatio:  0.8
})

这样打包出的 css js，会有 css.gz js.gz，即压缩过的 js 和 css。

之后在服务器端的 nginx 配置中开启 gzip：

查看配置文件：vim /usr/local/etc/nginx/nginx.conf

// 写在 http 中就可以
gzip  on;
gzip_types application/javascript text/css image/jpeg;

这样浏览器下载文件时还是之前的 js，但是服务器返回的压缩过的 .gz 文件，再在本地解压，时间缩短了很多。

2. echart 使用外链 js 文件，不引入 npm 包

在 html 中引入 echarts.min.js，china.js，echarts-gl.min.js，echarts-wordcloud.min.js，不引入 npm 包

在 webpack生产打包配置中增加：

externals: {
	"react":  "React",   // 左边引入时的自定义名字，右边全局变量名
	"react-dom":  "ReactDOM",
	"jquery":  "jQuery",
	"echarts":  "echarts"
}

https://doc.webpack-china.org/configuration/externals/#externals

打包后文件大小减小 0.5M

3. 配置打包去掉注释，删除debugger，删除console

new webpack.optimize.UglifyJsPlugin({
    comments:  false, //去掉注释
    compress: {
        warnings:  false,
        drop_debugger: true,
        drop_console: true
    }
}),

4. ant design 按需引入

https://github.com/ant-design/ant-design/issues/2656

1. 可以直接写，缺点每个组件需要单写一行
   
   import Button from "antd/lib/button"
2. 用对象的方式写
   
   import { Button } from 'antd';
   
   如果单用这种方式写，打包的时候每个文件会把 antd 的所有模块都加载进去，参见：
   
   https://ant.design/docs/react/getting-started-cn#按需加载
   
   需要引入 babel-plugin-import 使每个模块按需加载，并在 webpack.config.js 里配置

loaders: [
    ...
    {
       text: /\.(js|jsx)$/,
       include: paths.appSrc,
       loader: 'babel',
       query: {
           cacheDirectory: true,
           plugins: [["import", { libraryName: "antd", style: "css" }]]  // 这一句
       }
    },
    ...
]

每个引入antd的文件减小0.5M

5. 删除无用依赖

6. echart 图表懒加载

https://www.npmjs.com/package/react-lazyload

import LazyLoad from 'react-lazyload';
// 在需要懒加载的元素外包裹
<LazyLoad height={300} offset={10}><!--元素--></LazyLoad>

7. 使用 webpack-parallel-uglify-plugin 替代 UglifyJS 插件

https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/#增强代码代码压缩工具

使用 webpack-parallel-uglify-plugin 替代 webpack.optimize.UglifyJsPlugin 并行混淆压缩 js 文件，打包时间从四分钟减到两分钟。用法和 UglifyJsPlugin 相同。

var ParallelUglifyPlugin=require('webpack-parallel-uglify-plugin') ;
new ParallelUglifyPlugin({
	uglifyJS: {
		output: {
			comments:  false  //去掉注释
		},
		compress: {
			warnings:  false,
			drop_debugger:  true,
			drop_console:  true
		}
	}
}),

8. happypack 多进程执行 loader

原理

配置方式

引入 happypack

支持的loader列表

module.exports  = {
	module: {
		loaders: [
			{
				test: /.jsx?$/,
				loader:  "happypack/loader?id=happybabel",
				exclude: /node_modules/
			},
			{
				test: /\.json$/,
				exclude: /node_modules/,
				loader:  'happypack/loader?id=happyjson',
				include: [
					path.join(rootPath, "src/components"),
					path.join(rootPath, "src/mockdata"),
					path.join(rootPath, "src/views"),
				]
			},
			{
				test: /\.less$/,
				loader:  ExtractTextPlugin.extract("style", "happypack/loader?id=happyless"),
				include: [
					path.join(rootPath, "src/components/"),
					path.join(rootPath, "src/assets"),
					path.join(rootPath, "node_modules/antd"),
				]
			},
		]
	},
	plugins: [
		createHappyPlugin('happybabel', [{
			loader:  'babel-loader',
			query: {
				cacheDirectory:  true,
				plugins: [
				["import", { "libraryName":  "antd", "style":  true }] // `style: true` 会加载 less 文件
				]
			},
		}]),
		createHappyPlugin('happyjson', ['json-loader']),
		createHappyPlugin('happyless', ['css-loader?sourceMap!less']),
	]
}
function  createHappyPlugin(id, loaders) {
	return  new  HappyPack({
		id:  id,
		loaders:  loaders,
		threadPool:  happyThreadPool,
		verbose:  true
	});
}

打包时间减少了 15s

9. 检查 loader 中的 include 和 exclude 使其更加精确

https://jeffjade.com/2017/08/12/125-webpack-package-optimization-for-speed/#设置-test-amp-include-amp-exclude

{
	test: /\.json$/,
	exclude: /node_modules/,
	loader:  'happypack/loader?id=happyjson',
	include: [
		path.join(rootPath, "src/components"),
		path.join(rootPath, "src/mockdata"),
		path.join(rootPath, "src/views"),
	]
},
{
	test: /\.less$/,
	loader:  ExtractTextPlugin.extract("style", "happypack/loader?id=happyless"),
	include: [
		path.join(rootPath, "src/components/"),
		path.join(rootPath, "src/assets"),
		path.join(rootPath, "node_modules/antd"),
	]
},

搜索文件范围变窄，可以减小一点打包时间。