高性能 Webpack3 配置

参考：
High-performance webpack config for front-end delivery
webpack3 指南

Scope Hoisting （作用域提升）

过去 webpack 打包时的一个取舍是将 bundle 中各个模块单独打包成闭包。这些打包函数使你的 JavaScript 在浏览器中处理的更慢。相比之下，一些工具像 Closure Compiler 和 RollupJS 可以提升(hoist)或者预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度。

在生产环境中配置：

const webpack = require('webpack');module.exports = {  plugins: [    new webpack.optimize.ModuleConcatenationPlugin(),  ],};

下面放一张用户使用之后包体的对比，大概减少了50%，对于模块数量很多的项目来说提升较大。

Minification and Uglification （压缩和丑化）

代码压缩和“丑化”是生产环境中必不可少的，然而偶尔的会遗忘，所以在部署到生产环境之前，首先要做的就是检查代码是否经过压缩和“丑化”

错误的方式

直接运行 webpack 命令进行打包，查看包体积

正确的方式

只需要在 webpack 命令后面加上 -p 参数！

通过对比可以发现，减少了整整 60% 的体积！没有压缩前，充斥着空格、换行、注释！

📌 -p 参数不会设置 node 环境变量为生产环境 production，当你需要在生产环境中执行时，可使用该命令行：NODE_ENV=production PLATFORM=web webpack -p

📌 为了快速打包，可以将参数添加到 package.json 中：

123	"scripts": { "build": "webpack -p"},

高级压缩方式

使用 UglifyjsWebpackPlugin 插件
安装

1	npm i -D uglifyjs-webpack-plugin

用法

123456789

webpack.config.jsconst UglifyJsPlugin = require('uglifyjs-webpack-plugin')module.exports = {  plugins: [    new UglifyJsPlugin()  ]}

默认的配置已经很好的满足大部分的项目需求，但如何你想更进一步压缩，减少一部分不必要的代码，可以使用 Webpack 版本 > 3.0：

123	plugins:[ new webpack.optimize.UglifyJsPlugin({}),],

Dynamic Imports for Lazy-loaded Modules （动态引入和懒加载）

生产环境下的使用

使用动态引入的项目，编译时：

可以看到之前整个的 bundle.js 文件被拆分了多个，在 index.html 中只引入了 index.bundle.js 作为入口，按需加载其他被拆分的js文件

安装配置

安装 Babel：

1	yarn add babel-loader babel-core babel-preset-env

配置 webpack.config.js，允许 Babel 处理你的 js 文件

123456789

module: {  rules: [    {      test: /.js$/,      use: 'babel-loader',      exclude: /node_modules/,    },  ],},

完成以上设置后，可以安装处理动态引入的插件了

1	yarn add babel-plugin-syntax-dynamic-import

创建或修改 .babelrc 在项目的根目录

1234	{ "presets": ["env"], "plugins": ["syntax-dynamic-import", "transform-react-jsx"]}

改造代码

将需要被改造成懒加载的模块做简单的代替：

1	import Home from './components/Home';

with

1	const Home = import('./components/Home');

最终我们的 index.js 入口文件被改造成了这样，这种 import 的方式只是一种语法糖，在一些框架中如 vue 已经得到支持

import React from 'react';import Async from 'react-code-splitting';const Nav = () => (<Async load={import('./components/Nav')} />);const Home = () => (<Async load={import('./views/home')} />);const Countdown = () => (<Async load={import('./views/countdown')} />);

webpack.config.js

配置文件的出口和出口

123456789

entry: {  index: './index.js',},  output: {  path: path.resolve(__dirname, 'dist'),  filename: '[name].bundle.js',  publicPath: '/',},

Deterministic Hashes for Caching（对缓存使用确定的Hash值）

webpack 在默认的情况下不会自动添加 hash，例如 app.8087f8d9fed812132141.js，这意味着，数据保存在缓存个中，当用户刷新时不会得到更新。

在 webpack 快速添加 hashes：

123	output: { filename: '[name].[hash].js',},

⚠️ 注意这里有一个陷阱，每一次的构建，不管文件有没有更改都会重新声场新的 hash 值，例如在使用 webpack -p 时，即使用户已经已经下载相关文件，那么讲不得不刷新！

⚠️ 使用哈希值构建，将会降低编译的速度，请在生产环境中使用！

Deterministic Hashes 配置

📌这里我们需要解决的一个问题是，当内容改变到时候用户才会刷新缓存，如果没有改变，则不会去刷新缓存。

插件安装：

1	yarn add chunk-manifest-webpack-plugin webpack-chunk-hash

chunk-manifest-webpack-plugin: 允许导出一个json文件，将id映射到其中，webpack 会读取该json，以确定需要刷新缓存的模块
webpack-chunk-hash: 使用自定义的（md5）代替标准的webpack 生成的 hash

修改 webpack.config.js ，用于生产环境 :

12345678910111213141516171819202122232425262728293031323334353637

const webpack = require('webpack');const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');const WebpackChunkHash = require('webpack-chunk-hash');const HtmlWebpackPlugin = require('html-webpack-plugin');/* Shared Dev & Production */const config = {  /* … our webpack config up until now */  plugins: [    // /* other plugins here */    //     // /* Uncomment to enable automatic HTML generation */    // new HtmlWebpackPlugin({    //   inlineManifestWebpackName: 'webpackManifest',    //   template: require('html-webpack-template'),    // }),  ],};/* Production 指定了生产环境中使用 */if (process.env.NODE_ENV === 'production') {  config.output.filename = '[name].[chunkhash].js';  config.plugins = [    ...config.plugins, // ES6 array destructuring, available in Node 5+    new webpack.HashedModuleIdsPlugin(),    new WebpackChunkHash(),    new ChunkManifestPlugin({      filename: 'chunk-manifest.json',      manifestVariable: 'webpackManifest',      inlineManifest: true,    }),  ];}module.exports = config;

🌚 Tip
对于上面的例子，当你使用 yarn add html-webpack-plugin html-webpack-template 模板时，会自动的添加注释，如果没有使用 webpack 的 HTML 模板，则需要手动的引入，引入方式为：

<head>  <script>    //<![CDATA[    window.webpackManifest = { /* contents of chunk-manifest.json */ };    //]]>  </script></head>

同样的 manifest.js 也需要引入，当你设置好了这两个文件，那么一切准备就绪。

CommonsChunkPlugin for Vendor Caching

CommonsChunkPlugin ： CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

一行代码的简单配置：

module.exports = {  entry: {    app: './app.js',    vendor: ['react', 'react-dom', 'react-router'],  },};

然后运行 webpack -p

但是这种配置有个问题，这里的 'react', 'react-dom', 'react-router'，会同时打包到 index.bundle.js 和 vendor.bundle.js 中

要解决上述问题，我们需要使用 CommonsChunkPlugin 插件，将文件分离出来，在 webpack.config.js 中的配置

const webpack = require('webpack');plugins: [  new webpack.optimize.CommonsChunkPlugin({    name: 'vendor',  }),],

⚠️ 需要注意的是，插件中的name 要是入口的名字匹配

配置完成之后，重新打包，发现包体被拆分了！

Offline Plugin for webpack（PWA）

使用offline-plugin搭配webpack轻松实现PWA

此插件用于实现PWA，新技术，是否需要使用和探索，这里记录配置的方法，这并不复杂

安装：

1	yarn add offline-plugin

添加到r= webpack config:

1234567891011121314

const OfflinePlugin = require('offline-plugin');module.exports = {  entry: {    // Adding to vendor recommended, but optional    vendor: ['offline-plugin/runtime', /* … */],  },  plugins: [    new OfflinePlugin({      AppCache: false,      ServiceWorker: { events: true },    }),  ],};

然后，在 app 中的入口文件，在开始渲染之前使用：

12345678910111213

/* index.js */if (process.env.NODE_ENV === 'production') {  const runtime = require('offline-plugin/runtime');  runtime.install({    onUpdateReady() {      runtime.applyUpdate();    },    onUpdated() {      window.location.reload();    },  });}

webpack Bundle Analyzer（包分析工具）

1	yarn add --dev webpack-bundle-analyzer

添加到开发环境

12345678910

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;config = { /* shared webpack config */ };if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {  config.plugins = [    ...config.plugins,    new BundleAnalyzerPlugin(),  ];}

运行并监听 8888 端口

1	node_module/.bin/webpack --profile --json > stats.json

Multi-entry Automatic CommonsChunk Plugin（多页面应用程序）

应用场景不多，只记录下来。

webpack.config.js

const config = {  entry: {    pageOne: './src/pageOne/index.js',    pageTwo: './src/pageTwo/index.js',    pageThree: './src/pageThree/index.js'  }};

这是什么？我们告诉 webpack 需要 3 个独立分离的依赖图。

为什么？在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

We can update CommonsChunk to just figure things out automatically:

12345678910

/* Dev & Production */new webpack.optimize.CommonsChunkPlugin({  name: 'commons',  minChunks: 2,}),/* Production */new webpack.optimize.CommonsChunkPlugin({  name: 'manifest',  minChunks: Infinity,}),

来源：https://www.cnblogs.com/wangziqiang123/p/11691240.html

标签

Webpack

require

bundle

config