webpack打包优化

webpack打包优化

开发环境优化

1.开启热模块替换(HMR)

**原因:**如果不开启 HMR功能 的话,修改某一个模块的时候,所有模块都会重新打包

实现:

给devServer添加 hot:true

hot:true
给js添加HMR功能(除了入口文件以外)

在入口js里监听需要热替换的js文件

if (module.hot) {
  // 一旦 module.hot 为true,说明开启了HMR功能。 --> 让HMR功能代码生效
  module.hot.accept('./print.js', function() {
    // 方法会监听 print.js 文件的变化,一旦发生变化,其他模块不会重新打包构建。
    // 会执行后面的回调函数
    print();
  });
}

**tips:**css的 style-loader默认开启了HMR,这就是为啥开发环境需要使用style-loader

​ html因为只有一个,所以不用开启HMR

2.使用 source-map 进行源代码映射

**原因:**代码打包后如果报错,因为代码都被打包了,无法快速找到是哪一行代码的问题,所以需要源代码映射

实现:

在webpack.config.js 里添加 devtool:‘eval-source-map’

/*
  source-map: 一种 提供源代码到构建后代码映射 技术 (如果构建后代码出错了,通过映射可以追踪源代码错误)

    [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 (vue和react脚手架就是使用的这个)
      调试更友好  
        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
*/

3.将只需要被loader执行一次的规则放到 oneOf 里面去

**原因:**webpack里面有非常多的loader,每遇到一个文件就会调用所有的loader来对它进行匹配,但大多数文件只需要被一个loader所过滤,所以会浪费很多性能

实现:

    rules: [
      {
        oneOf: [
          {
            test:/..../,
            use:[.....]
          }
        ],
      },
    ],

生产环境优化

1.对资源进行缓存

**原因:**在资源没有变动的时候再次向服务器发送请求,直接在缓存里获取数据,类似HMR,但是生产环境是没有HMR的

实现:

在使用babel-loader 处理js文件的时候,options里面进行配置如下代码

// 第二次构建时,会读取之前的缓存
   cacheDirectory: true

/*
  缓存:
    babel缓存
      cacheDirectory: true
      --> 让第二次打包构建速度更快
    文件资源缓存
      hash: 每次wepack构建时会生成一个唯一的hash值。
        问题: 因为js和css同时使用一个hash值。
          如果重新打包,会导致所有缓存失效。(可能我却只改动一个文件)
      chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
        问题: js和css的hash值还是一样的
          因为css是在js中被引入的,所以同属于一个chunk
      contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样    
      --> 让代码上线运行缓存更好使用
*/

将打包出来的文件名进行定义

filename: 'js/built.[contenthash:10].js'
filename: 'css/built.[contenthash:10].css'

2.使用tree shaking(树摇)

**原因:**tree shaking 可以去除·无用代码,减小代码体积

实现:

/*
  tree shaking:去除无用代码
    前提:1. 必须使用ES6模块化  2. 开启production环境
    作用: 减少代码体积

    在package.json中配置 
      "sideEffects": false 所有代码都没有副作用(都可以进行tree shaking)
        问题:可能会把css / @babel/polyfill (副作用)文件干掉
      "sideEffects": ["*.css", "*.less"]
*/

3.使用code split 进行代码分割

**原因:**默认情况下webpack 打包代码的时候会把所有的文件打包到一个js文件里,导致该文件过大,加载较慢,所以可以使用代码分割,对文件进行分开打包,并行加载,加载资源的时候就会更快

实现:

方法一:给entry 设置多个入口(不常用)
  entry: {
    // 多入口:有一个入口,最终输出就有一个bundle
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
方法二:给webpack 配置optimization
  /*
    1. 可以将node_modules中代码单独打包一个chunk最终输出
    2. 自动分析多入口chunk中,有没有公共的文件。如果有会打包成单独一个chunk
  */
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
方法三:使用import()代码来进行引入
import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~');
  });

**tips:**一般是把方法二和方法三一起使用

4.文件懒加载和预加载

**原因:**懒加载可以让文件需要用到的时候才调用,预加载是等其他资源加载完毕之后等浏览器空闲了再进行加载

实现

import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
    console.log(mul(4, 5));
});

**tips:**预加载兼容性较差,一般只在PC浏览器版本比较高才使用,移动端和ie慎用

5.多进程打包

胡乱使用容易使打包速度更慢

6.使用PWA(离线加载)

兼容性不好

7.使用externals 忽略某些包,然后通过cdn引入

**原因:**某些包体积过大,影响打包速度和页面加载速度,所以可以把那些包忽略掉,然后调用cdn来用

使用:

在webpack里面配置

  externals: {
    // 拒绝jQuery被打包进来
    jquery: 'jQuery'
  }

然后在HTML里面引用外链

 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

8.使用dll 技术对某些库(第三方库)进行单独打包

你可能感兴趣的:(技术点,前端学习,前端,webpack)