vue-cli3项目打包并压缩代码体积

前言

最近要上线自己的个人项目，那得要服务器吧，拿着我这“碎银几两”，犹豫不决的买了两年，1核4g的服务器。
不上线不知道，一上线的结果就是：把静态资源加载出来足足花了10秒钟，
对于我这钟没耐性的人来说，都不想等，更别说用户使用者了。

压缩项目大小

1. 组件路由懒加载
   换成这种写法，当使用的时候，再去引入这个组件的资源。

const Home = () => import('../views/Home.vue')

const routes = [  
{
    path: '/index',
    component: Home
  },
}

2. 开启gzip压缩
   没开启gzip压缩之前，打包的项目源代码都是原来的格式。
   开启之后，如果大于某个大小，会进行压缩，变成.gz的格式。
   这是我开启之后的
   
   先下载这个包

npm i compression-webpack-plugin -D

下载完成后，在vue.config.js中进行如下配置(脚手架3是没有的，自己根目录下新建即可)

'use strict'
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: productionGzipExtensions, // 需要压缩的文件正则
        threshold: 10240, // 文件大小大于这个值时启用压缩
        deleteOriginalAssets: true // 压缩后保留原文件
      })
    ]
  },
}

配置完成后，再次build时，就可以打包成.gz文件了。不过还没完成。
后台进行配置，这里我的项目是用nodejs写的。框架是koa2，网上好多nginx的，可自行搜索。

npm i koa-compress

const options = {
  threshold: 1024
}
app.use(compress(options))

然后看一下效果，已经成功了。

3. 采用外部cdn的方式
   我的项目里用到了vue、vue-rouer、vuex、axios、element
   这些源代码加起来也是很大的。
   同样在vue.config.js中配置如下：
   看代码配置中的externals这块，不会被打包的模块。

 'use strict'
const CompressionPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new CompressionPlugin({
        test: productionGzipExtensions, // 需要压缩的文件正则
        threshold: 10240, // 文件大小大于这个值时启用压缩
        deleteOriginalAssets: true // 压缩后保留原文件
      })
    ]
  },
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/prod_env.js')
      config.set('externals', {
        vue: 'vue', // 属性为用到的模块名称，值为项目中引入的名称
        axios: 'axios',
        'vue-router': 'VueRouter',
        vuex: 'Vuex'
      })
    })
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/dev_env.js')
    })
  }
}

然后删除/注释掉项目中引入的模块



然后在public的index.html中引入外部cdn

这样再次build，代码同样会减少很多。
项目网址：http://clumsybird.work