vue项目打包优化

vue 项目打包上线移除console

使用build命令打包的时，会有一些警告的错误，原因是在上线之后不需要console语句，所以在上线的时候需要把这个console语句移除
比较好的解决方法：
使用命令下载babel的一个插件，安装命令：

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

然后需要在项目的根目录下的的babel.config.js文件中配置

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

执行打包命令后，console就会移除了
但是执行npm run serve后console也会被移除，解决方法就是判断开发环境还是生产环境，修改一下配置，在babel.config.js文件中加入代码

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

开发环境和部署环境

项目开发阶段和生成环境可能不一样，开发阶段主要是程序员使用的，配置也会比较随意，解决方法：使用两个入口文件，一个用于开发环境，另一个用于生产环境

创建入口文件

在src目录下创建两个文件 prod_env.js 和 dev_env.js
把main.js入口文件中的代码分别拷贝到这两个文件，然后把main.js文件删除

配置打包时的入口文件

在项目根目录创建vue.config.js,编写代码
通过NODE_ENV的值如果值为development，就说明当前是开发阶段，会将dev.env.js 作为入口文件
通过NODE_ENV的值如果值为production，就说明当前是开发阶段，会将prod_evn.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')
        })
    }
}

减小包的体积

通过import方式引入的安装包，在执行打包命令的话也会被打包，回照成体积过大，程序加载起来就会比较慢
解决方法：使用CDN 或者路由的懒加载
CDN方法就是把线上中的一些依赖，使用CDN节点的方式引用

修改生成环境（prod_env.js）入口文件

可以通过CDN节点方式引用的安装包，在文件都可以中删除
在 public目录下的index.html中引入删除安装包的CDN节点

 <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>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/app.min.js"></script>

在vue.config.js添加配置

要在生产环境中添加
在这里插入图片描述
执行npm run build打包
使用CDN方式，打包的时候就不用打包安装包，体积会减少
但是在开发阶段我们不需要使用CDN节点，而是继续用本地下载的安装包

在vue.config.js中修改配置

在这里插入图片描述

修改uoload目录下的index.html文件

在这里插入图片描述
配置完之后执行开发打包命令

npm run serve

查看网络会发现请求的资源会少很多

路由懒加载

vue-路由懒加载

前面移除了console语句，使用CDN节点处理，但是部署时打包还是过大

vue官网上的解决方法：结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

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

修改配置文件 babel.config.js