使用 Vue-cli3 构建 SPA 应用：完美解决打包体积过大的问题-JavaScript中文网-JavaScript教程资源分享门户

背景

随着前端技术的发展，单页面应用（SPA）的开发已经成为前端工程师的常态。SPA 应用通过异步加载数据和组件，达到了流畅的用户体验。但 SPA 应用的一个明显缺点就是打包体积过大，导致网页加载速度变慢，影响用户体验。

Vue-cli3 是 Vue 官方推出的一款脚手架工具，可以帮助我们快速创建 Vue 项目，并提供了完整的构建配置，可以进行打包优化，从而优化 SPA 应用的打包体积。

安装和创建项目

首先，我们需要安装 Node.js，确保您的电脑上已经安装了 Node.js，您可以通过以下命令来检查是否安装成功：

node --version

如果您没有安装 Node.js，请前往 Node.js 官网进行下载和安装。

接下来，我们需要安装 Vue-cli3：

npm install -g @vue/cli

安装完成后，我们可以通过以下命令来创建一个 Vue 项目：

vue create my-app

这里的 my-app 为项目的名称，您可以自定义。

配置打包优化

Vue-cli3 提供了一些默认的构建配置，但是如果我们需要进一步优化打包体积，我们需要进行如下配置：

使用 Babel 优化打包体积

在 babel.config.js 文件中，我们可以增加以下配置：

// javascriptcn.com 代码示例
module.exports = {
  presets: [
    // 添加以下配置
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: { version: 3 },
      },
    ],
  ],
};

这里的配置可以使得 Babel 在将 ES6+ 语法转换为 ES5 时，只会包含代码中使用到的 polyfill，从而减少最终打包的体积。

使用 Scope Hoisting 优化打包体积

Scope Hoisting 是一种打包优化技术，可以将模块中的多个函数作用域合并成一个作用域，从而减少模块加载的时间和内存消耗。

在 vue.config.js 文件中，我们可以增加以下配置：

module.exports = {
  configureWebpack: {
    // 添加以下配置
    optimization: {
      concatenateModules: true,
    },
  },
};

这里的配置可以开启 Scope Hoisting，从而减少最终打包的体积。

示例代码

下面是一个简单的示例代码，演示了如何使用 Vue-cli3 构建一个 SPA 应用，并配置打包优化：

// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/app.js"></script>
  </body>
</html>

// javascriptcn.com 代码示例
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

// javascriptcn.com 代码示例
<!-- App.vue -->
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

// javascriptcn.com 代码示例
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
  ],
});

总结

通过以上配置，我们可以优化 Vue-cli3 构建的 SPA 应用的打包体积，从而提高网页的加载速度，优化用户体验。当然，以上只是最基本的打包优化方法，我们可以根据具体项目需求，进行更加深入的打包优化。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653322d07d4982a6eb6847a2