webpack优化的几个方向

1. 减小代码体积

比如css压缩，js代码压缩，删除注释

2. 图片资源压缩

url-loader可以指定将小文件转换为base64，雪碧图可以减少浏览器http请求

3. 文件缓存 hash

const HtmlWebpackPlugin = require(html-webpack-plugin);

  module.exports = {
-   entry: ./index.js,
+   entry: {
+     main: ./index.js,
+   },
    output: {
-     filename: bundle.js,
+     filename: [name].[contenthash].js,  // / → bundle.8e0d62a03.js
      path: path.resolve(__dirname, dist)
    }
    plugins: [
      new HtmlWebpackPlugin({
-       title: Output Management
+       title: Caching
      })
    ],
  };

4. 代码懒加载

使用import 动态加载特定模块，当 webpack 看到 import() 时，它会自动把该模块从 chunk 中移除，只有在执行的时候才会被下载

5. 路由分模块加载与懒加载

component: () => import(’…/views/demo/About.vue’) component: () =>import(/* webpackChunkName: “about” */ “…/views/demo/About.vue”)

6. 三方库代码优化

项目中只使用第三方库中我们用到的代码，不把整个代码库引入

7. 服务器开启gzip压缩

减少浏览器加载文件size

8. cdn引入

利用浏览器缓存，采用cdn引入

9. 代码分包，提取公用文件

module.exports = {
          
   
  optimization: {
          
   
    splitChunks: {
          
   
      // 分包策略
    }
  }
}

splitChunks.chunks 该配置项用于配置需要应用分包策略的chunk。我们知道，分包是从已有的chunk中分离出新的chunk，那么哪些chunk需要分离呢。chunks有三个取值，分别是： all: 对于所有的chunk都要应用分包策略 async：【默认】仅针对异步chunk应用分包策略 initial：仅针对普通chunk应用分包策略

maxSize 该配置可以控制包的最大字节数。如果某个包（包括分出来的包）超过了该值，则webpack会尽可能的将其分离成多个包。但是不要忽略的是，分包的基础单位是模块，如果一个完整的模块超过了该体积，它是无法做到再切割的，因此，尽管使用了这个配置，完全有可能某个包还是会超过这个体积。