Vue项目中打包优化的四种方法详解

前言

打包优化的目的:

性能优化的主要方向:

1.异步组件配置(路由懒加载)

2.去掉打包后的 console

3.使用CDN

4.yarn build生成dist目录

总结

前言

默认情况下，通过import语法导入的第三方依赖包，最终会全部打包到一个js文件中，会导致单文件体积过大大，在网速底下时会阻塞网页加载，影响用户体验。

打包优化的目的:

1、项目启动速度，和性能

2、必要的清理数据

3、减少打包后的体积

第一点是核心，第二点呢其实主要是清理console

性能优化的主要方向:

路由懒加载

去除生产版console.log的打印输出

开发版使用依赖项，生产版使用在线CDN

项目打包及配置

1.异步组件配置(路由懒加载)

一上来加载所有的组件, 首屏加载就比较慢, 可以配置路由按需加载

当打包构建项目时，js包会变得非常大，影响页面加载，我们把不同路由的对应组件分割成不同的代码块，然后当路由被访问的时候加载对应的组件，这样能提升访问效率。

切分之后，并不是浏览器访问某个路由，才去下载对应的模块，仍然在首次访问程序时，下载所有模块，只不过每个模块分的很小，加载首页时需要的模块能够更快的下载下来，所以能够更快的显示

具体分三步：

安装包 npm install --save-dev @babel/plugin-syntax-dynamic-impor

在babel.config.js配置文件中加入插件

将路由改为按需加载的形式

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/Login',
    name: 'Login',
    // 路由懒加载
    component: () => import('../views/Login/index.vue')
  },
  {
    path: '/',
    component: () => import('../views/layout/index.vue'),
    children: [
      {
        path: '',
        component: () => import('../views/Home/index.vue')
      }
    ]
  }
]
//或者如下
const Login = () => import('@/views/Login')
const Reg = () => import('@/views/Reg')
const Layout = () => import('@/views/Layout')

2.去掉打包后的 console

打包上线后的console语句没有任何作用，所以我们应该移除它，除去手动移除，还可以使用插件的方式来移除代码里的console语句。

安装依赖 : yarn add terser-webpack-plugin -D (npm i terser-webpack-plugin -D)

在vue.config.js修改配置文件

// 获取当前的打包环境(具体文章最后会说明)
const env = process.env.NODE_ENV
// 覆盖默认的webpack配置
module.exports = {
  publicPath: './',  //首次加载白屏(打包后文件路径问题)
  devServer: {
    port: 3000,
    open: true
  },
  chainWebpack: (config) => {
    config.optimization.minimizer('terser').tap((args) => {
      args[0].terserOptions.compress.drop_console = true
      return args
    })
  } 
}

3.使用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
    }
}

 <!-- 使用CDN的CSS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.css) { %>
  <link
          href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" 
          rel="stylesheet"
  />
  <% } %>
  <!-- 使用CDN的CSS文件 -->
  <!-- 使用CDN的JS文件 -->
 <% for (var i in htmlWebpackPlugin.options.cdn &&
  htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
  <!-- 使用CDN的JS文件 -->

4.yarn build生成dist目录

得到一个dist目录,这个目录包含了项目中所有的页面,样式,业务, 第三方包, 默认html文件中引入了资源文件是以项目根目录引入的, 双击目前是打开不了的可以借助vscode中的live-sever

打包的过程中, 会对代码进行压缩合并, 版本降级, 语法转换等...

module.exports = {
  publicPath: './',  //解决路径问题
  devServer: {
    port: 3000,   //改变端口号
    open: true    //运行后,自动打开浏览器运行
  }
}

总结

到此这篇关于Vue项目中打包优化的四种方法的文章就介绍到这了,更多相关Vue项目打包优化内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)！

推荐阅读