Vue 打包优化

时间 2019-11-08

标签 vue 打包优化繁體版

原文原文链接

最近在作一个从头至尾本身搭建的项目，由于时间赶的缘由，一吨乱搞以后，打包起来发现一个js文件竟然要1.6MB,因而从网上找了许多大佬的文章作了一次打包优化，记录一下过程。javascript

## 本次记录以 vue-cli 3 为主
复制代码

本次优化分如下几个步骤css

安装 webpack-bundle-analyzer
路由懒加载
组件按需加载
使用gzip
剥离依赖包

一、安装分析工具

npm intall webpack-bundle-analyzer -D
复制代码

webpack-bundle-analyzer 可让咱们很直观的查看当前整个项目的打包状况，运行命令以下html

npm run build --report 

// 在vue.config.js 中添加配置
 /* 添加分析工具 */
    if (process.env.NODE_ENV === 'production') {
      if (process.env.npm_config_report) {
        config
          .plugin('webpack-bundle-analyzer')
          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
          .end()
        config.plugins.delete('prefetch')
      }
    }
复制代码

运行以后，会在浏览器打开一个页面，能够很直观的看到打包状况vue

二、路由懒加载

路由懒加载，其实也就是改路由的引用模式为函数，也就是将路由引用改为下面的形式java

{
      path: '/trans',
      components: {
        default: () => import('@/components/Commons/Transforma')
      }
}
复制代码

三、组件按需加载

组件按需加载须要安装 babel-plugin-componentwebpack

npm install babel-plugin-component
复制代码

按需引入就以官方的配置为准就能够了，例如我使用的 mint-ui 框架web

plugins: [
    [
      'component',
      {
        'libraryName': 'mint-ui',
        // 'styleLibraryName': 'theme-chalk',
        'style': true
      }
    ]
]
复制代码

在vue-cli 3 的脚手架中，是没有 .babelrc文件的，相应的操做能够在 babel.config.js 中操做 vue-router

四、使用`Gzip`

// 先安装compression-webpack-plugin
nmp i compression-webpack-plugin -D
复制代码

而后在 vue.config.js配置一下vuex

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

五、剥离依赖包

使用externals来决定剥离依赖包，固然这个剥离的意思只是在打包的时候，不对这些包进行打包，相反的，使用cdn进行引入vue-cli

首先在vue.config.js中配置externals

configureWebpack: config => {
    config.externals = {
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter'
    }
},
// key : value ，key 为依赖包的名称，value能够理解为一个别名
复制代码

而后就须要在public/index.html中的head引入cdn,具体代码以下

// 在vue.config.js中配置
const cdn = {
    css:[],
    js:[
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js'
    ],
}

// 将cdn注入index.html中
chainWebpack:config => {
    config.plugin('html')
      .tap(args => {
        args[0].cdn = cdn
        return args
      })
}
复制代码

而后在index.html之中引入一下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,viewport-fit=cover,minimum-scale=1, user-scalable=no">
    <!--引入cdn的js文件-->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
    <% } %>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1326977_2gh5rigij8r.css">
    <title>广东食品安全监督综合平台</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but exam doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>
复制代码

到这里就完成了依赖包的剥离