webapck - 性能优化

1. 优化开发体验
2. 优化输出质量

缩小文件的搜索范围

Webpack 在启动 后会从 配置的 Entry 触发，解析出文件的导入语句，再递归解析，
在遇到导入语句的时候，webpack 会做以下事情
1. 根据 导入语句去寻找 对应的要 导入的文件
2. 根据找到的要导入的文件的后缀，使用配置中的loader去处理文件

1. 优化Loader 配置，用 ‘babel-loader？cacheDirectory’或者 cache-loader
2. 优化 resolve.modules
3. 优化 resolve.mainFields: 用于配置第三方模块使用哪个入口文件
4. 优化 resolve.alias
5. 优化 resolve.extensions 导入第三方模块的时候带上后缀
6. 优化 module noParse ： 让 webpack 忽略对部分没有采用模块处理的
   vue vue-router vue vue-router vuex 代码中没有其他库的依赖

提升打包速度

1. DllPlugin DllReferencePlugin 生成动态链接库，当需要导入的模块存在于某个动态链接库中
2. HappyPack 对 loader 用 HappyPack 多进程打包

开发环境要做的事情

1. mode: development

   1. new webpack.NamedModulesPlugin()
   2. new webpack.NamedChunksPlugin()

2. webpack-dev-server

   1.       hot:true,
            watchOption {
              ignore: node_modules 
            }
          ``` 
        2. 模块热更新 // new webpack.HotModuleReplacementPlugin()
        3. 开启sourceMap: cheap-eval-module-source-map
        <!-- 4. 开启 watch  -->
      
         
        
      
      ### 生产环境要做的事情
        1. 压缩 JS
        2. 压缩  css, css  提出单个文件
        4. html 压缩
        3. CDN 加速
          1. 针对 HTML文件，不开启缓存
          2. 针对JS，CSS，图片 开启 CDN 和缓存 ，域名分片
        4. 图片 base64
        5. TreeShaking 摇树优化 只针对 esmodule
        6. 提取公共代码   
        7. 分割代码按需加载
        8. 开启 Scope Hoisting
        10. js 名字 用 [chunkhash].js, 
        11. css 名字用 [contenthash].css
        9. mode: produciotn
          1. 开启  js 压缩
          2. webpack.optimize SideEffectsFlagPlugin() // 摇树优化
          3. webpack.optimize.ModuleConcatenationPlugin() // 开启 Scope Hoisting
          
        10. 　开启GZIP 压缩
          ```js
          const CompressionWebpackPlugin = require('compression-webpack-plugin')
          plugins: [
            new CompressionWebpackPlugin()
          ]

   2. defer 资源

      plugins: [
        new HtmlWebpackPlugin(),
        new ScriptExtHtmlWebpackPlugin({
          defaultAttribute: 'async'
        })
      ]

3. 按需加载

   输出分析

4. 官方的可视化分析工具

5. webpack-bundle-analyzer