高性能 Webpack3 生产环境配置

原文：
High-performance webpack config for front-end delivery
webpack3 指南

高性能 Webpack 配置

Scope Hoisting （作用域提升）

官方文档：ModuleConcatenationPlugin

过去 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 中：

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

高级压缩方式

使用 UglifyjsWebpackPlugin 插件
安装

npm i -D uglifyjs-webpack-plugin

用法

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

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

plugins:[
  new webpack.optimize.UglifyJsPlugin({/* options here */}),
],

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

生产环境下的使用

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

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

安装配置

安装 Babel：

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

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

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

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

yarn add babel-plugin-syntax-dynamic-import

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

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

改造代码

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

import Home from './components/Home';

with

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

配置文件的出口和出口

  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：

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

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

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

Deterministic Hashes 配置

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

插件安装：

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 ，用于生产环境 :

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，新技术，是否需要使用和探索，这里记录配置的方法，这并不复杂

安装：

yarn add offline-plugin

添加到r= webpack config:

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 中的入口文件，在开始渲染之前使用：

/* 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（包分析工具）

yarn add --dev webpack-bundle-analyzer

添加到开发环境

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 端口

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:

/* Dev & Production */
new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  minChunks: 2,
}),
/* Production */
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity,
}),
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335