Vue 打包优化

1.移除console

在我们项目开发的阶段，我们会使用很多的console用于代码的测试，在打包的时候会有警告弹出，上线之后是不需要这些代码的所有要移除console。

解决方法

1.1  babel-plugin-transform-remove-console

babel插件

         1.1.1 安装

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

1.1.2配置

在项目根目录的babel.config.js 加入

plugins: ['transform-remove-console']

重新运行打包命令，就不会有console的警告了

1.1.3问题

这个移除方法会发现一个问题，无论是运行打包命令还是运行开发命令都会移除console 所以要给他加上判断，判断是开发环境还是打包环境

所以修改babel.config.js

1.2 terser-webpack-plugin

1.2.1安装

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

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

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

2.部署环境

在项目开发阶段和生产环境可能会不一样，最好的解决方法就是写两个入口文件，一个用于开发环境一个用于生产环境

2.1 创建入口文件

在src目录下新建 prod_env.js 和 dev_env.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 sever 命令  这样显示就是会将 dev.env.js 作为入口文件
• 部署时，使用 npm run build 命令 这样显示就是会将 prod_evn.js 作为入口文件

        

3.减小包的体积

解决方法有两个，1.CDN           2.路由懒加载

3.1 CDN

3.1.1 修改生成环境的入口文件 (prod_env.js)

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

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
    <script type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/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/lodash@4.17.15/lodash.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>

3.1.3 在vue.config.js  添加配置

注：重新运行命令即可

3.1.4  CDN的方法 会产生下列结果

• 入口文件 中的一些文件导入会被删除
• 会引入相应入口函数中删除的依赖         

动态决定index.html 中是否显示引用

修改 index.html

3.2 懒加载

代码打包到一个文件，会导致文件下载过慢  所以分割成部分代码段

3.2.1 安装插件

首先需要安装 babel 的一个插件：babel/plugin-syntax-dynamic-import

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

3.2.2修改配置文件

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

     3.2.3 修改路由引用

    修改 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')

再次运行，会发现小了哟 快了哦