vue 项目打包优化方法记录

vue 打包的方式

一般打包的方式有两种： 一、使用 vue-cli 脚手架生成的项目 二、使用 webpack

使用 vue-li 生成的项目是没有 config 文件夹的，那么就需要我们在根目录下创建一个 vue.config.js 的文件，而且文件的名称一定要是 vue.config.js

创建好文件之后在文件里添加以下代码：

//打包配置文件
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '' : ''， // 基本路径
  outputDir: 'dist', // 输出目录
  assetsDir: 'static', // 静态资源目录
  indexPath: "", // html 的输出路径相对应 outputDir 也可以是绝对路径
  parallel: false // 生产构建为 babel 提供 loader 
};

使用 webpack 创建好项目后可以看到目录中有一个 config 文件夹，直接修改 assetsPublicPath 字段

配置完成之后，调起控制台，输入打包命令 npm run build 开始打包，成功后会在项目目录自动生成 dist 文件夹。

dist 文件夹就是我们需要的包，随后放至服务器部署上线即可，需要注意打包之后无论在项目中做了何种修改，都需要 npm run build 重新打包。

打包优化的方法

打包优化的目的有： 1、提高项目启动速度和性能 2、必要的清理数据 3、减少打包后的体积

• 组件按需加载

这是首先可以优化的点。如果频繁使用了第三方组件/ UI 库，如我的项目中经常使用 element-ui, 如果全部引入，项目体积非常大，这时可以按需引入组件。

• 路由懒加载

采用 ES6 提出的 import 方法加载模块，实现路由懒加载

/**
 * @description 采用 ES6 提出的 import 方法加载模块，实现路由懒加载，进行性能优化
 */
const Login = () => import('@/modules/admin/admin/Login');
const Home = () => import('@/modules/admin/Home');
// const AdminHome = () => import('@/modules/admin/home/AdminHome');
const ChangePwd = () => import('@/modules/admin/admin/ChangePwd');
const ProjectInfo = () => import('@/modules/admin/project/ProjectInfo');
const ProjectEdit = () => import('@/modules/admin/project/ProjectEdit');
const FinishFileEdit = () => import('@/modules/admin/project/FinishFileEdit');
const PrintApply = () => import('@/modules/admin/pcb/PrintApply');
const PatchApply = () => import('@/modules/admin/pcb/PatchApply');
const PrintAgainApply = () => import('@/modules/admin/pcb/PrintAgainApply');
const PatchInfo = () => import('@/modules/admin/pcb/PatchInfo');
const PCBInfo = () => import('@/modules/admin/pcb/PCBInfo');
const Details = () => import('@/modules/admin/customer/Details');
const Edit = () => import('@/modules/admin/customer/Edit');

• 异步组件

一上来加载所有的组件, 首屏加载就比较慢, 可以配置路由按需加载。当打包构建项目时，js 包会变得非常大，影响页面加载，我们把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候加载对应的组件，这样能提升访问效率。 切分之后，并不是浏览器访问某个路由，才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，加载首页时需要的模块能够更快的下载下来，所以能够更快的显示 如果组件在页面加载时不需要，只是调用时用到，这时可以使用异步组件的写法，仅仅是引入，和注册写法不同，举例代码如下：

// template
<test v-if="showTest"></test>
// script
 components: {
  test: () => import('./test') // 将组件异步引入，告诉 webpack，将该部分代码分割打包
 },
 methods:{
   clickTest () {
     this.showTest = !this.showTest
  }
 }

• 去掉打包后的 console

打包上线后的 console 语句没有任何作用，所以我们应该移除它，除去手动移除，还可以使用插件的方式来移除代码中的 console 语句。 安装依赖： yarn add terser-webpack-plugin -D (npm i terser-webpack-plugin -D) 在 vue.config.js 修改配置文件

  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  } 

• 使用 gzip

目的是减小打包生成文件的体积，安装 compression-webpack-plugin， vue.config.js 文件配置如下：

 // webpack 配置
  configureWebpack: config => {
    config.devtool = 'source-map';
    // 如果是生产环境
    if (isProduction) {
      // 开启 gzip 压缩
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        // 匹配文件名
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        // 对超过 10k 的数据压缩
        threshold: 10240,
        minRatio: 0.8,
        // 不删除源文件
        deleteOriginalAssets: false
      }));
    }
  }

• 使用 CDN

使用 CDN，减少包的体积。 将线上环境中用到的一些依赖，使用 CDN 网络节点的方式进行引用，而不是直接打包到包里。 项目开发阶段和生产阶段不一样，我们在开发阶段还是要使用 import 导入依赖的方式来进行开发，在生产阶段再配置 CDN 外链来获取项目依赖。 默认情况下，Vue 项目的开发模式和发布模式，共同使用一个打包的入口文件（src/main.js）为了将项目的开发过程与发布过程分离，我们可以分别使用两个入口文件，一个用于开发环境打包(这个就是 main.js)，一个用于生产环境打包 在 vue.config.js 中配置如下：

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development';
 // 本地环境是否需要使用 cdn
const devNeedCdn = false
 // cdn 链接
const cdn = {
    // cdn：模块名称和模块作用域命名（对应 window 里面挂载的变量名称）
    externals: {
        vue: 'Vue',
        vuex: 'Vuex',
        'vue-router': 'VueRouter',
        'marked': 'marked',
        'highlight.js': 'hljs',
        'nprogress': 'NProgress',
        'axios': 'axios'
    },
    // cdn的css链接
    css: [],
    // cdn 的 js 链接
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/axios/0.19.2/axios.min.js'
    ]
}
module.exports = {
    chainWebpack: config => {
        // ============注入cdn start============
        config.plugin('html').tap(args => {
            // 生产环境或本地需要cdn时，才注入cdn
            if (isProduction || devNeedCdn) args[0].cdn = cdn
            return args
        })
        // ============注入cdn start============
    },
    configureWebpack: config => {
        // 用cdn方式引入，则构建时要忽略相关资源
        if (isProduction || devNeedCdn) config.externals = cdn.externals
    }
}

以上就是本文的全部内容, 记录了我所学习到的一些打包优化的知识。如果后续学习到更多打包优化相关内容再进行补充整理。