07-首屏优化策略

1.（1）路由懒加载：import动态引入路由组件

　　当打包构建应用时，JavaScript包会变得非常大，影响页面加载。

　　如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

　　以函数的形式动态引入，这样就可以把各自的路由文件分别打包，只有在解析给定的路由时，才会下载路由组件。比如做了动态路由加载，渲染首屏时候，并不会把其他页面的路由组件给加载出来。而是只有跳转到其他页面路由时候才加载。

 （2）并且：

　　cli3中默认开启的prefetch(预先加载模块)，他会提前获取用户未来可能会访问的内容。

　　不关闭就会在首屏把动态路由也都会一口气下载了。

2. element-ui按需加载

3. 开启摇树

module.exports = {
  //...
  optimization: {
    usedExports: true,
  },
};

4. 拆包（splitChunks）

参数chunks的三个值说明：

async：异步模块的拆分或者说是切割，如动态加载的模块。

initial：只对入口文件中引入的模块进行拆分，至于引入的这个模块中还引入了其他模块，则不会拆分。

all：以上两种的合体；对所有模块管你同步异步，管你模块引多少层模块，都给你拆成一个个的。　

　　(1)   公共模块抽离

　　(2)   第三方库抽离

5. gzip压缩

拆完包之后，我们再用gzip做一下压缩

npm i compression-webpack-plugin -D

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

6.通过externals加载外部CDN资源