时装包大小可以用 webpack-bundle

近期做完一个项目，可是装包以后发现太大，记录一下改进方案

• Element、Vant 等组件库按需加载
• 静态资源应用cdn开展引进
• 打开gzip缩小
• 路由器懒加载

#最先看一下什么也没做时装包大小

可以用 webpack-bundle-analyzer 软件在装包时展开分析

能够看见有2.5M大小，下面就来进行改善

Element、Vant 等组件库按需加载

能够看见，在包装的文档中，占有较大比例就是这2个组件库,我们可以用按需加载来减少 按需加载依照官方文档来就可以了,应注意配备bebel.config.js

  // 在bebel.config.js的plugins列表中配备    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
     ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }, 'vant']

配备后尺寸,能明显的看见有减少

静态资源应用cdn开展引进

下面占有率最大的是一些能通过cdn开展引进的静态资源了

设定除外

vue.config.js文档中进行调节除外，没有进行装包

设定例外情况情况下 key:value 中key数值给你引进的库的名称，value值给这个库引进的情况下放在window里的特性

    config.externals({
      "vue":'Vue',
      "vue-wordcloud":'WordCloud',
      "@wangeditor/editor-for-vue":"WangEditorForVue",
    })

之后在工程项目的 public/index.html 文档中开展cdn引进

cdn得话有挺多种多样的,例如bootcdn、jsdelivr等，建议使用jsdelivr，npm官方网就是采用这个

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.runtime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-wordcloud@1.1.1/dist/word-cloud.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor-for-vue@1/dist/index.js"></script>

结束后

gzip缩小

打开gzip缩小需要用到软件，可以使用compression-webpack-plugin

在vue.config.js文档中开展配备

chainWebpack: config => {
    config.optimization.minimize(true)
},
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
        return {
        plugins: [
            new CompressionPlugin({
            test: /\.js$|\.css$|\.html$/,
            algorithm: 'gzip',
            threshold: 10240,
            deleteOriginalAssets: false,
            })
        ]
        }
    }
}

结束后

在配置结束后，在本地根本无法打开应用，必须配备Nginx开展适用才可以

路由器懒加载

路由器懒加载的基础是webpack的Magic Comments 官方文档

    // 在路由配置中，根据下边这种方法导进相匹配部件
    component: () => import(/* webpackChunkName: "mColumn" */ '../mviews/ColumnView.vue')

结束后

路由器懒加载并不能减少文件打包后尺寸，可是能让文档分成不同类型的控制模块，当路由器自动跳转时，才载入现阶段路由器相对应的部件

这样就能大大降低首屏黑屏的时间也，不用再第一次进入时就载入所有文件

如下图，当第一次进入时只能载入到home.xx.js，当进到另一个路由器的时候会去载入相匹配部件，如图片中的socket.xx.js