观看视频: Totally Tooling Tips: Webpack Tips笔记, 视频发布时间: 2017-08-11.

内容大多为性能相关.

webpack-performance

uglifyJsPlugin 压缩ES5代码

1
2
3
4
5
6
7
const webpack = require('webpack');

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

BabiliPlugin 压缩ES2015代码

不编译到ES5的情况下使用该插件

1
2
3
4
5
6
7
8
const webpack = require('webpack');
const BabiliPlugin = require('babili-webpack-plugin");

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

压缩CSS

如果不使用 ExtractTextPlugin, 记得加上minimize: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const webpack = require('webpack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  }
};

使用 ExtractTextPlugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugin: [
    new ExtractTextPlugin('styles.css')
  ]
};

使用 ExtractTextPlugin 的好处是不需要parse两次代码, 同时还会有缓存的机制提升一部分性能.

tree-shaking

处理import和export, 只export所需的import.

remove your dead code in terms of your imports and exports

unused code is not removed by webpack, it is done by a minifier like uglifyjs

使用webpack的生产模式

1
webpack -p

或者利用插件:

1
2
3
4
5
6
7
const webpack = require('webpack');

module.exports = new webpack.DefinePlugin({
  "process.env": {
    "NODE_ENV": JSON.stringify("production")
  }
})

source-map-explorer

source map explorer分析项目中各部分模块的组成情况

处理Vendors

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: {
    app: './src/app.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
  ]
};

大部分vendor多个JS文件共用, 可以提取出来以便浏览器缓存, 提升程序性能.

CommonsChunkPlugin

与code splitting相关

1
2
3
4
5
6
7
// before
// static import所有模块
import { renderProduct } from './components/product';
import { renderReview } from './components/review';

renderProduct();
renderReview();
1
2
3
4
5
6
7
8
9
// 引入&打包最少的所需模块(static imports)
import { renderProduct } from './components/product';
renderProduct();

// 动态引入部分模块(dynamic import)
import('./review.js)
  .then((module) => {
    module.renderReview();
  })

Dynamic Imports

类似moment.js的库

moment.js常用于处理时间相关的操作, 如果引入moment.js的默认配置, 代码size很大, 大部分代码是localization相关的代码, 除非是国际化的站点, 否则其实不需要加载全部这类相关的代码, 即使需要, 也可以使用动态加载的方式.

使用ContextReplacementPlugin只加载所需的代码. 

1
2
3
4
5
6
7
8
9
10
11
12
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      // path to directory which should be targeted by the plugin
      /moment[\/\\]locale/,
      // regular expression matching locales that should be included
      /(en-gb|en-us)\.js/
      )
  ]
};

lodash

lodash是个模块化的库, 可以只引入所需的模块. 使用 lodash-webpack-plugin和babel-plugin-lodash

相关资源