Vue 打包的优化（缩小包大小，减小首屏加载时间）

时间 2019-11-09

标签 vue 打包优化缩小大小减小加载时间繁體版

原文原文链接

毕竟但愿本身是个追求极致的人，因此会继续努力，下面只是本身遇到的，相同相似的方法你们能够探讨琢磨，让项目更好
复制代码

1. 处理方式

CDN 加载三方库
忽略 moment.js 语言库
ant-design-vue 按需加载icons，组件

2. 对比

未处理以前
处理以后

包的大小已经很小了，虽然首屏加载一秒还能够接受，不过能少点，就要少一点！

3. 具体操做步骤

3.1 CDN 加载三方库

首先运行一条命令 npm uninstall moment axios vuex vue-router，对没有错，就是要删了这些依赖包，烦人的东西！

去 CDN 网站，寻找你想要的，例如：搜索vue，哈哈哈开玩笑了！传送门 https://www.bootcdn.cn/, 这是国内的

找到你的包，复制其标签，获得以下内容：<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

将其放在 /public/index.html, <head>标签中此时大家须要一张图

修改 vue.config.js 配置
module.exports = {
   configureWebpack: {
      // CDN 加载组件
      externals: {
          'vue-router': 'VueRouter',
          Vuex: 'Vuex',
          axios: 'axios',
          moment: 'moment'
   }
 }
复制代码

到这里，你就能够放心了，这些东西会经过请求到项目中，不会打包进入，你已经省出了 1 秒钟的首屏加载时间，让咱们继续优化！css

3.2 moment.js

moment.js 是真的挺大，最终要的是大无所谓，可是有不少没用的语言包却妨碍我了
我根本不想要那么多国家的沟通，我只想要咱们大中华的语言库，因此，干掉其它语言库是咱们首要的任务
看看咱们打包分析报告，一堆没用的玩意，看着就难受

看看咱们收拾了一顿以后

想要这个改变，就只须要一句话

module.exports = {
   configureWebpack: {
       // 忽略moment其它语言库
      plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)],
   }
 }
复制代码

3.3 ant-design-vue

是我经常使用的UI库，好看，方便，文档齐全，可是打包的时候也不尽人意html

一样看看咱们打包分析报告，我想说：你给我，去（排泄物）

看看改变

一样一句话就搞定

module.exports = {
   configureWebpack: {
      resolve: {
         alias: {
           '@ant-design/icons/lib/dist$': path.resolve(__dirname, './src/icons.js')
    }
 }
复制代码

那是不可能的咱们还须要在src文件夹下面加一个文件 icons.jsvue

//本身项目里面用到的Icon
export {
  default as DownOutline
} from '@ant-design/icons/lib/outline/DownOutline'`
复制代码

今后之后虽然很舒服的减少了打包大小，不过咱们必须手动引入全部使用的icon，唉，谁让咱们想追求项目的最好状态呢，以上都是本人遇到内容优化若是你们有什么更好的方案，咱们评论区见webpack