webpack系列学习（五）性能优化（下）

生产环境性能优化

一、优化打包构建速度

1.1、oneOf（上一章已讲解）

1.2、babel缓存（上一章已讲解）

1.3、多进程打包

下载 cnpm i thread-loader -D
给babel-loader用
在webpack.config.js中配置

{
  test: /\.js$/,
  exclude: /node_modules/,    
  use: [
      // 开启多进程打包，进程开启大概600毫秒，进程通信也有开销
      // 所有只有工作消耗时间较长时，才需要进行进程打包
      // 'thread-loader',
      {
          loader: 'thread-loader',
          options:{
              worker: 2 // 进程2个
          }
      },
      {
          loader: 'babel-loader',
          options: {
              presets: [
                  [
                      '@babel/preset-env', // 基本兼容
                      {
                          // 按需加载
                          useBuiltIns: 'usage',
                          corejs: {
                              version: 3
                          },
                          // 指定兼容性做到哪个版本的浏览器
                          targets: {
                              chrome: '60',
                              firefox: '60',
                              ie: '9',
                              safari: '10',
                              edge: '17'
                          }
                      }
                  ]

              ],
              // 开启babel缓存，第二次构建时，会读取之前的缓存
              cacheDirectory: true
          }  
      }
  ],
  //      
},

二、优化代码运行的性能

2.1、文件资源缓存（hash-chunkhash-cotenthash）（上一章已讲解）

2.2、tree-shaking（上一章已讲解）

2.3、code split代码分割（上一章已讲解）

2.4、懒加载和预加载

首先是懒加载，就是在未触发时有些js文件可不加载，当我们触发时再加载。
预加载可以在浏览器空闲后再偷偷加载
在html中写一个button按钮，在入口js文件中绑定dom

document.getElementById('btn').onclick = function () {
  // 懒加载
  // 预加载 prefetch
  // 正常加载是多个文件并行加载，预加载可以在浏览器空闲后再偷偷加载，但是兼容性不好
  import(/* webpackChunkName: 'test', webpackPrefetch: true*/'./test')
  .then((add) => {
    // 文件加载成功
    // eslint-disable-next-line
    console.log(add(2, 5));
  });
}

2.5、PWA渐进式网络开发应用程序

作用：和app一样，网页离线也能访问
步骤：
安装workbox：cnpm i workbox-webpack-plugin -D
在webpack.config.js中配置
const workboxWebpackPlugin = require('workbox-webpack-plugin');

new workboxWebpackPlugin.GenerateSW({
   // 1.帮助serviceworker快速启动
   // 2. 删除旧的servcieworker
   // 生成一个serviceworker配置文件
   clientsClaim:true,
   skipWaiting: true
})

在入口js文件中注册serviceWorker

// 注册serviceWorker
// 处理兼容性问题
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(() => {
        // eslint-disable-next-line
        console.log('sw注册成功');
      })
      .catch(() => {
        // eslint-disable-next-line
        console.log('注册失败');
      });
  });
}

1. eslint不认识window，navigator全局变量，解决，在package.js中修改eslintConfig配置
   "env": {
   "browser": true // 支持浏览器端全局变量
   }
   2.sw代码必须运行在服务器上
   cnpm i serve -g
   serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去

2.6、externals

忽略不想打的包，比如jquery我们只想cdn引入

webpack.config.js添加    
externals: {
   // 忽略库名 --npm包名
   jquery: 'jQuery'
}

记得在htm引入jquery

2.7、dll动态链接库

可以一次将第三方库打包，后面不许重复打包
新建webpack.dll.js文件

/**
* 使用dll技术，对某些库（第三方库，jquery，react，vue）进行但单独打包
* 运行webpack时，默认查找的是webpack.config.js文件，所以
* 需要运行webpack.dll.js文件，
* 所以修改命令--> webpack --config webpack.dll.js
*/

const {resolve} = require('path');
const webpack = require('webpack');
module.exports = {
   entry: {
       // 最终打包生成的[name] --> jquery
       // ['jquery'] --> 要打包的库是jquery
       jquery: ['jquery']
   },
   output: {
       filename: '[name].js',
       path: resolve(__dirname, 'dll'),
       library: '[name]_[hash]' // 打包的库里面向外暴露出去的内容叫什么名字
   },
   plugins: [
       // 打包生成一个manifest.json文件，提供一个jquery映射
       new webpack.DllPlugin({
           name: '[name]_[hash]', // 映射库的暴露的内容名称
           path: resolve(__dirname, 'dll/manifest.json') // 输出文件路径
       })
   ],
   mode: 'production'
};

运行命令webpack --config webpack.dll.js
生成了dll文件夹
修改webpack.config.js
const webpack = require('webpack');

// 告诉webpack哪些库不参与打包，同时使用时的名称也得变
new webpack.DllReferencePlugin({
   manifest: resolve(__dirname, 'dll/manifest.json')
}),

在入口js文件中引入，jquery，打包后此时不会将jquery打包进built.js文件
若想要引入jquery
安装
cnpm i add-asset-html-webpack-plugin -D修改webpack.config.js
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

// 将某个文件打包出去，并在html中自动引入该资源
new AddAssetHtmlWebpackPlugin({
    filepath: resolve(__dirname, 'dll/jquery.js')
})