网络层面优化

{
  test: /\.js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader?cacheDirectory=true',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

1
2
3
4
5
6
7
8
9
10

const HappyPack = require('happypack');

exports.module = {
  rules: [
    {
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ 'babel-loader?presets[]=es2015' ],
      use: 'happypack/loader',
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    }
  ]
};

exports.plugins = [
  // 2) create the plugin:
  new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: [ 'babel-loader?presets[]=es2015' ]
  })
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

1
2
3
4
5
6
7

accept-encoding:gzip

1

粥里有勺糖

Choose mode

网络层面优化

# 网络层面优化

# DNS解析

# TCP连接

# Http请求/响应

# webpack 优化

# 构建过程提速

# 构建结果体积压缩

# 拆分资源

# 删除冗余代码

# Gzip 压缩

# 开启Gzip