Vue项目上线打包优化

1、Vue上线打包移除console

再发开阶段我们为了方便输出都会利用大量的console，但是在项目上线以后我们是不需要的，因此我们就要想办法去除，这里用到了两个方法一个是babel-plugin-transform-remove-console，一个是terser-webpack-plugin

1.babel-plugin-transform-remove-console

1.1.1.安装

npm install babel-plugin-transform-remove-console --save-dev

1.1.2 在项目根目录下的 babel.config 文件中加入如下代码

1.1.3 在启用服务即可

npm run build

1.1.4 但是在用这个插件的时候会有一个问题，就是无论我们 npm run build 还是 npm run sever 最后都会将console移除掉，我们的解决办法就是判断是开发阶段还是生产阶段，我们就要修改 babel.config 中的代码，修改代码如下

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [...prodPlugins]
}

2.terser-webpack-plugin

1.2.1安装

npm install terser-webpack-plugin --save-dev

1.2.1项目根目录下新建 webpack.config.js，注册此插件


const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  }
}

重现打包即可

2、vue项目打包之开发环境和部署环境

我们的项目在开发阶段用的一般都是一些假的数据，或者假的端口，项目上线以后就要换成后端的提供的接口，而手动改就很麻烦，我们这里就是创建两个文件

2.1创建入口文件

在 src 目录下新建 prod_env.js 和 dev_env.js，将main.js 中代码分别拷贝到这两个文件中，并删除 main.js

2.2项目根目录下新建 vue.config.js

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/prod_env.js')
    })

    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/dev_env.js')
    })
  }
}

说明：

开发时，使用 npm run serve 命令，NODE_ENV 的值就是 developmnent ，所以会将 dev.env.js 作为入口文件
部署时，使用 npm run build 命令，NODE_ENV 的值就是 production，所以会将 prod_evn.js 作为入口文件

3、vue项目打包之减小包的体积

默认情况下，凡是通过 import 方式引入的包，打包时都会被打包，这就会导致最后的包体积比较大，伴随而来的就是程序的加载速度慢，解决方法主要是两个：一个是使用CDN、一个是路由的懒加载

3.1CDN

3.1.1修改生产环境入口文件

凡是通过CDN节点方式引用的包，在这里都删除或者隐掉

3.1.2然后在 public/index.html 中加入如下引用

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>

3.1.3在 vue.config.js 中添加配置

在重新打包即可，注意在第一次打包有可能出错，在打包一次即可

3.1.4

在开发阶段的时候我们希望 index.html 中使用这些 CDN 节点的依赖，开发阶段，不希望 index.html 中的这些引用存在，而是继续使用本地的包，就需要在这里判断一下

修改index.html

此时，开发时打包，html 页面中就不会有这些引用了，否则会造成冲突

3.2懒加载

虽然前面经过了去除console语句、使用CDN节点的处理，但是部署时打的包还是过大，代码打包到一个里面文件太大，所以要分割成代码段

3.2.1首先需要安装 babel 的一个插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

3.2.2 在 babel 的配置文件中加入插件

3.2.2修改 router/index.js


import Vue from 'vue'
import VueRouter from 'vue-router'
const Login = () => import(/* webpackChunkName: "group-login" */ '../components/Login.vue')
 
const Home = () => import(/* webpackChunkName: "group-common" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "group-common" */ '../components/Welcome.vue')
 
const Users = () => import(/* webpackChunkName: "group-rights" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "group-rights" */ '../components/power/Roles.vue')
 
const Category = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Category.vue')
const Params = () => import(/* webpackChunkName: "group-category" */ '../components/goods/Params.vue')
 
const GoodsList = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsList.vue')
const GoodsAdd = () => import(/* webpackChunkName: "group-goods" */ '../components/goods/GoodsAdd.vue')
 
const Order = () => import('../components/order/Order.vue')
const Report = () => import('../components/reports/Report.vue')

重新编辑，就会发现加载的时候，每个模块的文件都会小很多