vue-cli3结合webapck优化

骑猪看日落 2021-09-09 05:24 452阅读 0赞

# vue-cli3结合webapck优化 #

## 1 . 懒加载 ##

### (1). js 需要的时候加载 ###

app.vue:
    <template>
        <div id="app">
            <button @click="fn">按钮</button>
        </div>
    </template>
    <script>
    export default { 
        name: "App",
        created() { 
            console.log('index.js 被加载')
        },
        methods: { 
            fn() { 
                import("../src/utils/test.js")
                    .then(({ mul }) => { console.log('test.js加载成功：',mul(40, 3));
                    })
                    .catch((err) => { 
                        console.log(`test.js加载失败:${ err}`);
                    });
            }
        },
    };
    </script>
    
    test.js
    console.log('test.js 被加载')
    export function mul(a,b){ 
        return a+b
    }

点击按钮的时候，才会加载test.js 文件。不会重复加载，当第二次点击按钮会调用缓存。  
![在这里插入图片描述][eca1a950a70142a38b55024d60c3af3d.png]

### (2). 路由懒加载 ###

静态引用方式
    import KeepAlive from '@/components/KeepAlive'
    routes:[ path: '/', name: 'KeepAlive', title: "iframes页面",component: KeepAlive ]
    
    改成这种 
    
    { 
        path: "/",
        name: "KeepAlive",
        title: "iframes页面",
        component: () => import("../component/KeepAlive.vue")// 这种就是赖加载
    },
    
    以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件
    
    补充：有时候需要解析识别import()，配合使用babel-plugin-syntax-dynamic-import
    
    babel-plugin-syntax-dynamic-import 作用：用以解析识别import()动态导入语法---并非转换，而是解析识别
    
    安装：
    
    npm install babel-plugin-syntax-dynamic-import
    
    使用：.babelrc
    
    { 
      "plugins": ["syntax-dynamic-import"]
    }

## 2. 预加载 ##

提前知道用户未来可能会访问的内容 ,就会把那些内容路由 提前加载。  
文件正常加载可以认为是并行加载(同一时间加载多个文件)，预加载是等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

在之前的import语法中添加一个参数 webpackPrefetch 表示预加载
    document.getElementById('btn').onclick = function () { 
        // 预加载
        import(/* webpackChunkName: 'test', webpackPrefetch: true */ "../src/utils/test.js")
            .then(({multi, sum}) => { console.log(multi, sum) console.log('multi=', multi(3, 3))
            }).catch(() => { 
                console.log('test文件加载失败!')
            })
    }

注意：可以关闭预加载的功能

module.exports = { 
        chainWebpack: config => { 
            // 移除 prefetch 插件
            config.plugins.delete('prefetch')
        }
    }

### (1).懒加载和预加载在实现上面都差不多，但是区别是： ###

预加载会在使用之前提前加载test文件  
懒加载是当文件需要用时才加载

### (2). 正常加载和预加载的区别： ###

正常加载可以认为是并行加载（同一时间加载多个文件）并没有所谓的先后顺序。会造成某一个文件很大但是它是在某些特定条件下才会实现，那么就会造成整体页面加载缓慢。  
预加载是等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。)

### (3). 懒加载和预加载的缺点： ###

懒加载：首次点击按钮才加载文件，但是文件过大就会等待时间过长页面才会有反应，（相当于有一个延迟的效果）用户体验不好。但是第二次点击就会调用缓存，就没问题了。  
预加载：会有兼容问题（ie浏览器会有很大的兼容问题），慎用。

## 3. 使用cdn 预加载， 提前 引入js 文件 ##

一种方式在public/index.html 引入  
另一种方式 结合 vue.config.js

vue.config.js
    // cdn预加载使用
    const externals = { 
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'axios': 'axios'
    }
    const cdn = { 
        // 开发环境
        dev: { 
            css: [
                'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
                'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
            ],
            js: []
        },
        // 生产环境
        build: { 
            css: [
                'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
                'https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css'
            ],
            js: [
                'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
                'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
                'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
                'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
            ]
        }
    }
    module.exports = { 
        chainWebpack: config => { 
            // 使用cdn
            config.plugin('html').tap(args => { 
                if (process.env.NODE_ENV === 'production') { 
                    args[0].cdn = cdn.build
                }
                if (process.env.NODE_ENV === 'development') { 
                    args[0].cdn = cdn.dev
                }
                return args
            })
        },
        configureWebpack: config => { 
            const myConfig = { }
            //本地环境 线上环境
            if (process.env.NODE_ENV === 'production') { 
                myConfig.externals = externals
            }
            if (process.env.NODE_ENV === 'development') { 
                myConfig.devServer = { 
                    disableHostCheck: true
                }
            }
            return myConfig
        }
    
    }
    
     public/index.html:
    
    <!DOCTYPE html>
    <html lang="zh-CN">
     
    <head>
      <meta charset="utf-8">
      <meta name="renderer" content="webkit">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     
      
      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) {  %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
      <% } %>
     
      
      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) {  %>
      <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
      <% } %>
     
      
      <title>vue-cli3</title>
    </head>
     
    <body>
     
      <noscript>
        <strong>We're sorry but vue-project-demo doesn't work properly without JavaScript enabled. Please enable it
          tocontinue.</strong>
      </noscript>
      <div id="app"></div>
     
      
      <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) {  %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
      <% } %>
     
    </body>
    </html>

## 4. 去掉注释、去掉console.log ##

npm i uglifyjs-webpack-plugin
    
    vue.config.js ：
    
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 
    module.exports = { 
        configureWebpack: config => { 
                const myConfig = { }
                if (process.env.NODE_ENV === 'production') { 
                    myConfig.plugins = []
                    myConfig.plugins.push(
                    new UglifyJsPlugin({ 
                        uglifyOptions: { 
                        output: { 
                            comments: false, // 去掉注释
                        },
                        compress: { 
                            warnings: false,
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log']//移除console
                        }
                        }
                    })
                )
    
            }
        }
    }

## 5. Gzip压缩（压缩js、css） ##

npm i compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')
    module.exports = { 
        configureWebpack:{ 
            plugins: [
    			// 配置compression-webpack-plugin压缩
    			new CompressionWebpackPlugin({ 
    				algorithm: 'gzip',
    				test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
    				threshold: 10240,
    				minRatio: 0.8
    			})
    		]
        }
    
    }

## 6. css 不拆分 ##

vuecli 3会默认开启一个css分离插件 ExtractTextPlugin

每一个模块的css文件都会分离出来，整整13个css文件，而我们的首页就请求了4个，花费了不少的资源请求时间，  
所以可以在vue.config.js中关闭它  
css: \{  
// 是否使用css分离插件 ExtractTextPlugin  
extract: false,  
// 开启 CSS source maps?  
sourceMap: false,  
// css预设器配置项  
loaderOptions: \{\},  
// 启用 CSS modules for all css / pre-processor files.  
modules: false  
\},  
这样的话，打包出来的dist 就没有css 文件

## 组件重复打包 ##

# 二 webpack #

识别你的 入口文件，识别你的模块依赖，来打包成一个js文件

## 1. externals 外部扩展-- 引入cdn ##

防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。总就是：防止将某一些包打包到我们最终的bundle里面导致包体积变大【不想通过webapck 打包】

场景：jquery我们希望通过csdn链接引入使用，不希望打包到最后的bundle里面，为了避免打包的时候将jquery最终也给打包了，可以配置externals，禁止将jquery打包。可以参考【使用cdn 预加载， 提前 引入js 文件】  
注意: 必须再外网

## 2. plugins ##

指webpack 开发 内置的插件【如：compression-webpack-plugin】，而不是其他第三方的插件

## 3. bundle.js ##

bundle.js 简单的理解是打包生产的js文件

依赖关系：  
因为webpack从entry开始，对每一个 module 都进行处理，碰到 require 之后就跳入到对应的 module 的处理，也就是递归的对这颗依赖树进行处理，这是典型的深度优先遍历的递归解法，而且是先序优先遍历。处理的过程是这样的  
处理 main.js，记录入口 \[main\]  
碰到 require(a)，记录 \[main, a\]  
进入到 a 模块，碰到语句 require©, 记录下来 \[main, a, c\]  
同理碰到 require(d)，记录下来 \[main, a, c, d\]  
返回到 main.js，下一句是 require(‘b’)，记录下来 \[main, a, c, d, b\]  
进入模块 b，碰到语句 require(e),记录下来\[main, a, c, d, b, e\]  
返回，结束

## 4. prefetch(预先加载模块) ##

预加载prefetch：会在使用之前，提前加载js;

文件正常加载可以认为是并行加载(同一时间加载多个文件)，预加载是等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。

兼容性比较差，慎用。

## 5. HMR（hot module replacement） 模块热替换 ##

作用：一个模块发生改变，只会重新打包这一个模块（而不是打包所有模块），提高webpack构建速度  
实现：在devServer配置中增加一个hot属性，值为ture，表示开启HMR功能。HMR是基于dev-server的，生产环境是不需要dev-server。

devServer: { 
        contentBase: resolve(__dirname, 'build'),
        port: 3000,
        open: true,
        compress: true,
        hot: true, // 开启HMR功能  
    }

注意：

样式文件：可以使用HMR功能，因为style-loader内部实现了HMR功能,会自动的去做。所以我们在开发环境借用style-loader，性能更好，打包速度更快；生产环境需要提取成一个单独的文件，因为上线需要考虑到代码的性能优化。
    js文件： 默认不能使用HMR功能，修改完js代码后，整体模块会重新加载
    html文件：默认不能使用HMR功能

## 6. babel缓存 & hash缓存 ##

场景：

当有100个js文件，当修改了其中某一个js文件的时候，不可能再把所有的js文件再编译一遍，会影响构建速度，所以这个时候只要实现修改一个js文件只构建那一个文件，其他的99个文件不动。

那么这个时候可能会想到用热模块替换（HMR），但是HMR是基于dev-server的，生产环境是不需要dev-server。  
那么这个时候可以用缓存实现。怎么配置呢？  
1、针对js兼容性进行缓存：(babel缓存)  
babel-loader的options设置中增加cacheDirectory属性，属性值为true。表示：开启babel缓存，第二次构建时会读取之前的缓存，构建速度会更快一点。

{ 
        test: /\.js$/,
        loader: 'babel-loader',
        options: { 
            cacheDirectory: true
        }
    }

2、针对文件资源进行缓存  
（1）hash：每次webpack构建时都会生成一个唯一的hash值。（不管文件有没有修改，只要构建就重新生成hash值。）  
比如：filename: ‘built.\[hash:10\].js’  
缺点：因为webpack构建js和css是共用一个hash值，如果重新打包会导致所有缓存失效。（只修改js文件，那么css文件也重新构建了）  
（2）chunkhash：如果打包来自同一个chunk，那么hash值就一样。  
问题：js和css的hash值还是一样的  
因为css是在js中被引入的，所以还是同一个hash值，同属于一个chunk.  
（3）contenthash：根据文件的内容生成hash值，不同文件的hash值都不一样

**缓存作用**：

babel缓存：让第二次打包构建速度更快  
hash缓存：让代码上线运行缓存更好使用

## 7. 代码分割 code split ##

将我们打包输出的一个文件分割为多个文件。（并行加载，速度更快 、按需加载）  
主要针对于js代码。

### （1）方式一 ###

通过修改entry配置多入口，有几个入口输出有几个bundle

entry: { 
        index: './src/js/index.js',
        test: './src/js/test.js'
    }

缺点：修改不太灵活,要改配置。

### （2）方式二：optimization ###

1.  单入口应用中  
    可以将node\_modules中代码单独打包成一个chunk最终输出(将第三方的东西打包成一个chunk，自己本身的代码打包成一个chunk)
2.  多入口应用中  
    自动分析多入口chunk中有没有公共的文件(公共依赖)，如果有会单独打包成一个chunk

optimization: { 
        splitChunks: { 
            chunks: 'all'
        }
    }

### （2）方式三：import动态导入语法， ###

import动态导入语法，能将某个文件单独打包(通过js代码让某个文件被单独打包成一个chunk) (纯粹的单入口)

// 在index.js文件中通过import动态引入test.js文件：
    import(/* webpackChunkName: 'test' */'./test')
        .then(({multi, sum}) => { console.log('res=', multi(1, 2), sum(3, 5))
        }).catch(() => { 
            console.log('文件加载失败')
    })

## 8. 多进程打包 thread-loader ##

场景：js是单线程，同一时间只能干一件事情，如果事情很多，那么就会排队等很久，时间慢。如果同一时间两个/三个进程干这件事情，那么速度就会快很多。

thread-loader ：开启多进程打包，一般用在babel-loader后面。

module: { 
        rules: [
            { 
                test: /\.js$/,
                use: [{ 
                    loader: 'thread-loader',
                    options: { 
                        workers: 2
                    }
                },
                'babel-loader']
            }
        ]
    }

**有利有弊**：

进程启动大概600ms，进程通信(告诉你某件事情我干好了)也有时间开销。  
假设我们花100ms完成的事情，开启多进程打包，那么就会得不偿失。所以多进程打包用在：工 作消耗时间比较长，用直白的话说就是js代码多

**补充**：  
多进程打包一般用在js文件上面，那么有两个loader对js文件进行处理：  
eslint-loader：只是对代码进行语法检查，消耗时间可能不是很长  
babel-loader：要进行编译，转换，所以时间比较长，所以用在babel-loader里面

## 9. dll ##

### (1). dll是什么 ###

类似于externals，指使哪些库是不需要打包的。和externals区别在于 dll 会单独的对某些库进行单独打包，将多个库打包成一个chunk。

### (2). 有什么意义 ###

正产情况下一个项目下 node\_modules 里面的包会打包成一个chunk，但是第三方库很大，打包成一个chunk文件体积过大。所以通过 dll 将所有库进行单独打包成不同的chunk，更加有利于我们的性能优化，提高构建速度。

使用dll技术对某些库(第三方库：jquery，react，vue…)进行单独打包，减少重复打包次数，提高构建速度。

### (3). 参考 ###

[webpack优化系列(11)-dll][webpack_11_-dll]

## 9. webpack分包及异步加载套路 ##

（1）静态资源图片，字体可以在webpack配置url-loader,file-loader结合这用，以及png,svg,base64这些结合使用，具体可以参考百度搜索  
（2）js文件打包，可以使用chunk，进行分模块，并且webpack添加按需加载配置dynamic（比如一个文件超过1M，可以分成多文件，具体拆分规则待讨论）  
（3）vue的每个组件中，对于引入的dom对象的使用，事件监听，或者bus的使用，记住，需要销毁，否则占用内存较大，久了容易页面卡顿  
（4）可以在路由的加载中进行权限校验，但是复杂的权限，建议提取出来，项目登录时判断+进入主页后判断，并且可以对数据进行持久化，

[eca1a950a70142a38b55024d60c3af3d.png]: /images/20210813/72f54a5408054aab8f0432c716853952.png
[webpack_11_-dll]: https://blog.csdn.net/ysj1218/article/details/114291706?spm=1001.2014.3001.5501