07tree shaking、代码分割、懒加载、PWA技术

tree shaking

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

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

代码分割

从入口分割可分为单入口和多入口

// 单入口
// entry: './src/js/index.js'
entry: './src/js/index.js',
// 多入口：有一个入口，最终输出就有一个bundle
/**
entry: {
    main: './src/js/index.js',
    test: './src/js/test.js'
},
 */
output: {
    // [name]: 取文件名
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
},

配合optimization参数，配置如下：

/**
 * 1. 可以将node_modules中代码单独打包一个chunk，最终输出
 * 自动分析多入口chunk中，有没有公共的文件。如果有，会打包成单独一个chunk
 */
optimization: {
    splitChunks: {
        chunks: 'all'
    }
},

单入口，配合optimization参数配置，通过import动态导入

新建一个test.js文件

export function mul(x,y){
    return x * y;
}

通过import动态导入，webpackChunkName命名文件

import { mul } from './print.js';

/**
 * 通过js代码，让某个文件被单独打包成一个chunk
 * import动态导入语法：能将某个文件单独打包
 */

import (/* webpackChunkName: 'test' */'./print.js')
.then(({mul, count}) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(mul(3,4));
})
.catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~~');
})

懒加载

懒加载：当文件需要使用时才加载
预加载prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

/**
 * 懒加载：当文件需要使用时才加载
 * 预加载prefetch：会在使用之前，提前加载js文件
 * 正常加载可以认为是并行加载（同一时间加载多个文件）
 * 预加载prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
 */

import (/* webpackChunkName: 'test', webpackPrefetch: true */'./print.js')
.then(({mul, count}) => {
    // 文件加载成功~
    // eslint-disable-next-line
    console.log(mul(3,4));
})
.catch(() => {
    // eslint-disable-next-line
    console.log('文件加载失败~~');
})

PWA技术

PWA: 渐进式网络开发应用程序（离线可访问）

安装workbox-webpack-plugin
npm install workbox-webpack-plugin -D
在webpack.config.js中引入响应配置
先引入workbox-webpack-plugin，后在插件中配置

 /**
  * PWA: 渐进式网络开发应用程序（离线可访问）
  *     workbox --> workbox-webpack-plugin
  */
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin')

在plugins中配置如下：

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

在js中注册serviceWorker，处理兼容性问题

/**
 * 1. eslint不认识window、navigator全局变量
 *   解决： 需要修改package.json中eslintConfig配置
    "eslintConfig": {
            "extends": "airbnb-base",
            "env": {
            "browser": true
        }
    }
    2. serviceWorker代码必须运行在服务器上
        --> nodejs
        -->
            npm i serve -g
            serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
 */
// 注册serviceWorker
// 处理兼容性问题
if ('serviceWorker' in navigator){
    window.addEventListener('load', () => {
        navigator.serviceWorker
        .register('/service-worker.js')
        .then(() => {
            console.log('serviceWorker注册成功了！！！');
        })
        .catch(() => {
            console.log('serviceWorker注册失败 了！！！')；
        })
    })
};

注意：如果引用了eslint，需要在package.json的eslintConfig中配置，因为eslint不认识window、navigator全局变量，配置如下：

"eslintConfig": {
	"extends": "airbnb-base",
	"env": {
	  "browser": true
	}
}

07tree shaking、代码分割、懒加载、PWA技术

tree shaking

代码分割

懒加载

PWA技术

猜你喜欢