vue打包文件vendor.js或app.js过大，如何优化减小体积？

我们在使用webpack的时候，发布到生产环境时会进行打包，发现自己打包的vendor.js有1M多。在调试时使用slow 3G网络加载超过30s，不过这只是个测试，现在基本不用3G网络了；但是打包文件过大，还是会导致加载时间变慢，用户成功进入首屏的时间边长，影响体验。所以尝试了以下几种优化方案。优化方案1.设置prodctionSourceMap在build/webpack.base.co...

小包同学666

7247人浏览 · 2020-03-10 11:01:51

小包同学666 · 2020-03-10 11:01:51 发布

我们在使用webpack的时候，发布到生产环境时会进行打包，发现自己打包的vendor.js有1M多。在调试时使用slow 3G网络加载超过30s，不过这只是个测试，现在基本不用3G网络了；但是打包文件过大，还是会导致加载时间变慢，用户成功进入首屏的时间边长，影响体验。所以尝试了以下几种优化方案。

优化方案

1.设置prodctionSourceMap

在build/webpack.base.conf.js下找到属性prodctionSourceMap，默认为true，会生成一些加密的map文件，体积较大，将其设置为false。

听说生产环境下prodctionSourceMap为true的时候能看到源码。点击详情
在这里插入图片描述
2.配置externals

需要在index.html的中引入cdn；这里要注意提供的 cdn 是否会出现不稳定的情况。
在这里插入图片描述
在build/webpack.base.conf.js中配置externals，左边为要导入的依赖的名字，右边为别名；

在使用的文件下，还是需要使用import导入

3.路由懒加载

未使用懒加载：

import Type from '@/views/guide/type';

export default new Router({
  routes: [{
      path: '/',
      redirect: {
        name: 'Type'
      }
    }]
})

使用懒加载：

const Type = () => import('@/views/guide/type');

export default new Router({
  routes: [{
      path: '/',
      redirect: {
        name: 'Type'
      }
    }]
})

注意：虽然懒加载减小了打包文件的大小，减少首页加载用时。但是可能会导致页面跳转不流畅，会造成卡顿。