Webpack 指南(中)

一. Tree Shaking

  • Tree Shaking 描述用于移除 JavaScript 上下文中的未引用代码,它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export
  • 使用类似 UglifyJSPlugin 等插件来实现代码压缩与精简
  • 安装 uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin --save-dev
  • 添加到 webpack.config.js 中
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

modules.exports = {
  //...
  plugins: [new UglifyJSPlugin],
};

二. 生产环境构建

  • 开发环境(development)与生产环境(production)的构建目标差异很大,所以应当分离出差异的配置,保留通用的配置,使用 webpack-merge 来分别合并环境差异的配置与通用的配置
  • 安装 webpack-merge
npm install webpack-merge --save-dev
  • 添加 webpack.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: 'Hello Webpack!' }),
  ],
  output: {
    filename: '[name].[hash:4].js',
    path: path.resolve(__dirname, 'dist'),
  },
};
  • 添加 webpack.dev.js 表示开发环境下的独立配置
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
});
  • 添加 webpack.prod.js 表示生产环境下的独立配置
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'source-map',
  plugins: [new UglifyJSPlugin()],
});
  • 修改 package.json 的 scripts
"scripts": {
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
},
  • 在开发环境时运行 npm run start,Source Map 配置为 inline-source-map 使调试更加清晰,并启用 webpack-dev-server
  • 在生产环境时运行 npm run build,Source Map 配置为 source-map 在运行时更为快速,并使用 UglifyJSPlugin 来进行代码压缩
  • 经常能见到项目中使用了 process.env.NODE_ENV 这个值,这个值并不是一个变量,而是构建开始之前被静态化编译了,所以需要特定的配置使他生效
// webpack.prod.js
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production'),
    },
  }),
],
  • 当在源码中需要区别于开发环境与生产环境的代码时应这样:
if (process.env.NODE_ENV === 'production') {
  // production
} else {
  // development
}

三. 代码分离

1. 多入口

  • 使用多个入口的方式来达到分离代码,使用 CommonsChunkPlugin 插件来防止多个入口中代码内使用相同文件的情况,做到去重与分离 chunk
  • 配置 webpack.config.js
plugins: [
  new webpack.optimaize.CommonsChunkPlugin({
    name: 'common',
  }),
],

2. 动态导入

  • 使用 import() 语法(内部使用 Promise)来动态导入模块
  • 首先,应当配置 webpack.config.js 的 output 选项
output: {
  filename: '[name].bundle.js',
  chunkFilename: '[name].bundle.js',
  path: path.resolve(__dirname, 'dist'),
},
  • 使用 chunkFilename 来决定非入口 chunk 的名称
  • 可以使用 async 函数来搭配石笋 import(),前提是浏览器支持或使用了 babel 等的预处理器

四. 缓存

1. 输出文件名称

  • 应当使用 [hash] 或 [chunkhash] 来配置 webpack.config.js 的 output.filename,以确保当文件内容变化后,防止浏览器缓存请求旧的文件而发现不了变化

2. 提取模板

  • 使用 CommonsChunkPlugin 可以将 webpack 的样板(boilerplate)和 manifest 提取到单独的包中
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime',
  }),
],

3. 提取 vendor

  • 将第三方库(library)(例如 lodash 或 vue)提取到单独的 vendor chunk 文件中,因为它们很少像本地源码一样频繁修改,利用客户端的缓存,减少向服务器获取资源
  • 使用一个新的 entry(入口)来配置,并额外配置一个 CommonsChunkPlugin 实例来实现
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: ['lodash'],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime',
    }),
  ],
};
  • 这里引入 runtime 的目的是说明 CommonsChunkPlugin 的 'vendor' 实例必须在 'runtime' 实例之前引入

4. 模块标识符

  • 每个 module.id 会基于默认的解析顺序进行增量,也就是说,当解析顺序发生变化,ID 也会随之改变
    • main bundle 会随着自身的新增内容的修改,而发生变化
    • vendor bundle 会随着自身的 module.id 的修改,而发生变化
    • runtime bundle 会因为当前包含一个新模块的引用,而发生变化
  • 使用 HashedModuleIdsPlugin 插件在生产环境上
plugins: [
  new webpack.HashedModuleIdsPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'runtime',
  }),
],

你可能感兴趣的