webpack学习一（官网和尚硅谷的视频）

 

 

 

 

 

 

<!-- 性能优化 -->

###开发环境

HMR、source-map

<!-- HMR

// 样式文件：可以使用HMR功能：因为style-loader内部实现了~

// js文件：默认不能使用HMR功能  需要修改js代码，添加支持HMR功能的代码

// 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。

// if (module.hot) {

//   // 一旦 module.hot 为true，说明开启了HMR功能。  让HMR功能代码生效

//   module.hot.accept('./print.js', function() {

//     // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。

//     // 会执行后面的回调函数

//     print();

//   });

// }

// html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）

// 解决：修改entry入口，将html文件引入 -->

<!-- // 生产模式的源代码到构建后的代码，资源映射，在开发时，能够指定出错误的代码和出现的位置

  // [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

  // source-map：外部

  //   错误代码准确信息 和 源代码的错误位置

  // inline-source-map：内联

  //   只生成一个内联source-map

  //   错误代码准确信息 和 源代码的错误位置

  // hidden-source-map：外部

  //   错误代码错误原因，但是没有错误位置

  //   不能追踪源代码错误，只能提示到构建后代码的错误位置

  // eval-source-map：内联

  //   每一个文件都生成对应的source-map，都在eval

  //   错误代码准确信息 和 源代码的错误位置

  // nosources-source-map：外部

  //   错误代码准确信息, 但是没有任何源代码信息

  // cheap-source-map：外部

  //   错误代码准确信息 和 源代码的错误位置 

  //   只能精确的行

  // cheap-module-source-map：外部

  //   错误代码准确信息 和 源代码的错误位置 

  //   module会将loader的source map加入

  //     内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

  //   开发环境：速度快，调试更友好

  //   速度快(eval>inline>cheap>...)

  //     eval-cheap-souce-map

  //     eval-source-map

  //   调试更友好  

  //     souce-map

  //     cheap-module-souce-map

  //     cheap-souce-map

  //    eval-source-map  / eval-cheap-module-souce-map

  <!-- // 生产环境：源代码要不要隐藏? 调试要不要更友好

  //   内联会让代码体积变大，所以在生产环境不用内联

  //   nosources-source-map 全部隐藏

  //   hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

  //    source-map / cheap-module-souce-map --> 

###生产环境

(避免使用inline-和eval-，因为他们会增加bundle体积大小，并降低性能)

* 优化打包构建速度

  * oneOf

  <!-- rules以下的规则会匹配一个 -->

  * babel缓存

  <!--  cacheDirectory: true 让第二次打包构建速度更快 -->

  * 多进程打包

  <!-- 下载thread-loader  配置在js的文件中-->

  * externals

  <!-- 将外部引入的包，禁止打包到built文件中，而是通过CSDN引入 -->

  * dll

  <!-- 一般情况下,node_modules下的文件打包成一个built文件，可通过dll，将不同的库打包成不同的文件

  1.weback.dll.js中配置打包文件的库，先打包生成dll文件，之后在webpack.config.js中通过mainfest.json告诉它,插件配置-->

* 优化代码运行的性能

  * 缓存(hash-chunkhash-contenthash)

  <!-- 

   hash: 每次wepack构建时会生成一个唯一的hash值。

        问题: 因为js和css同时使用一个hash值。

          如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

      chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样

        问题: js和css的hash值还是一样的

          因为css是在js中被引入的，所以同属于一个chunk

      contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样    

      让代码上线运行缓存更好使用

   -->

  * tree shaking

  <!-- 让多余的代码删除， 前提：生产环境和ES6模块化  package.json中

  "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking）

        问题：可能会把css / @babel/polyfill （副作用）文件干掉

      "sideEffects": ["*.css", "*.less"] -->

  * code split

  <!-- 代码分割 

  1.根据入口文件进行代码分割，以入口文件的名称命名输出。

  2. splitChunks  chunks:all 

  可以将文件中引入的node modules中的代码单独打包成一个chunk

  分析多入口的文件中，重复引入一个依赖，则是打包一个

  3.动态导入：import引入，后边调用promise

  -->

  * 懒加载/预加载

  <!-- 

    懒加载：当需要使用的时候，才加载相关依赖

    // 预加载 prefetch：会在使用之前，提前加载js文件 

    // 正常加载可以认为是并行加载（同一时间加载多个文件）  

    // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

   -->

  * pwa

    <!-- PWA: 渐进式网络开发应用程序(离线可访问) ServiceWorkers

    workbox  workbox-webpack-plugin -->