1. 按需加载

通过 webpack 提供的 import() 语法动态导入功能进行代码分离，通过按需加载，大大提升网页加载速度。

使用方式如下：

export default function App () {
    return (
        <div>
            hello react 111
            <Hello />
            <button onClick={() => import('lodash')}>加载lodash</button>
        </div>
    )
}

2. 浏览器缓存

浏览器缓存，就是进入某个网站后，加载的静态资源被浏览器缓存，再次进入该网站后，将直接拉取缓存资源，加快加载速度。

webpack 支持根据资源内容，创建 hash id，当资源内容发生变化时，将会创建新的 hash id。

配置 JS bundle hash，webpack.common.js 配置方式如下：

module.exports = {
  // 输出
  output: {
    // 仅在生产环境添加 hash
    filename: ctx.isEnvProduction ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
  },
}

配置 CSS bundle hash，webpack.prod.js 配置方式如下：

module.exports = {
  plugins: [
    // 提取 CSS
    new MiniCssExtractPlugin({
      filename: "[hash].[name].css",
    }),
  ],
}

配置 optimization.moduleIds，让公共包 splitChunks 的 hash 不因为新的依赖而改变，减少非必要的 hash 变动，webpack.prod.js 配置方式如下：

module.exports = {
  optimization: {
    moduleIds: 'deterministic',
  }
}

通过配置 contenthash/hash，浏览器缓存了未改动的文件，仅重新加载有改动的文件，大大加快加载速度。

3. CDN

将所有的静态资源，上传至 CDN，通过 CDN 加速来提升加载速度。

webpack.common.js 配置方式如下：

export.modules = {
  output: {
    publicPath: ctx.isEnvProduction ? 'https://xxx.com' : '', // CDN 域名
  },
}

webpack学习

五、加快加载速度

1. 按需加载

2. 浏览器缓存

3. CDN