vue2项目webpack打包的优化策略，降低打包文件后的大小

1.区分开发模式和打包模式的main.js入口文件

首先，在项目的根目录下创建一个名为 vue.config.js 的文件（如果已存在，请跳过此步骤）。

然后对于你的项目中的mian.js新建一个相同内容的js文件，然后将这2个mian.js文件分别命名为

打包模式的入口文件：main-prod.js

开发模式的入口文件：mian-dev.js

然后，打开 vue.config.js 文件，并添加以下代码：

module.exports = {
  chainWebpack: config => {
    // 打包模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')

    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')

    })
  }
}

通过以上配置，您可以根据当前的开发模式或打包模式来使用不同的入口文件。这样可以根据需要进行代码分割和优化，以满足开发和打包阶段的不同需求。

2.路由懒加载

2.1路由懒加载的作用以及重要性： 路由懒加载是一种优化技术，用于延迟加载应用程序的路由组件。在 Vue 2 中，通常使用路由懒加载来提高应用程序的性能和加载速度。

作用和重要性如下：

减少初始加载时间：通过路由懒加载，应用程序不会在初始加载时一次性下载所有路由组件的代码。相反，只有当用户访问某个特定路由时，才会按需加载该路由对应的组件。这减少了初始加载时间，使得应用程序能够更快地呈现初始页面，提供更好的用户体验。

优化带宽利用率：懒加载只加载当前需要的路由组件，避免了不必要的资源下载。这对于用户在移动设备或网络速度较慢的环境下访问应用程序尤为重要。通过减少资源的下载量，可以更高效地利用带宽，并降低数据传输的成本。

分割代码块：路由懒加载将应用程序的路由组件拆分为多个代码块，每个路由对应一个独立的代码块。这样可以有效地减小应用程序的初始包大小，并将代码块按需加载，从而降低了首次加载的延迟。此外，当用户导航到不同路由时，只需加载相应的代码块，而不是整个应用程序的所有代码。

提高页面切换性能：路由懒加载可以使页面切换更加平滑和响应。由于只加载当前路由所需的代码块，切换到其他页面时的加载时间更短，用户能够更快地看到页面内容，提升了用户体验。

2.2如何实现 这是官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html，本文所说的是使用 webpack对于项目进行的路由懒加

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用命名 chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)：

const UserDetails = () =>
  import(/* webpackChunkName: "group-user" */ './UserDetails.vue')
const UserDashboard = () =>
  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
const UserProfileEdit = () =>
  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

这是怎么运用的呢，举例：

在路由js中写项目的时候写关于用户的组件时路由导入时本来是这样子： 导入用户组件页面

import User from '../components/user/UserComponent.vue'

导入权限管理页面

import Rights from '../components/power/RightsComponent.vue'

导入角色列表页面

import Roles from '../components/power/RolesComponent.vue'

在进行路由懒加载webpack打包的时候就是，将这三个封道同一个异步块中

分别由这三个部分组成：组件名字，自己定义的异步块名字，组件的路径

const User = () =>import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/UserComponent.vue')

const Rights = () =>import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/RightsComponent.vue')

const Roles = () =>import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/RolesComponent.vue')

3.按需导入element ui

在我们打包文件的时候会发现element ui在mian.js中导入 Element UI 库并注册全局组件时会比较大所以就改为按需导入

本来的：在mian.js中（这里的main.js是你的打包入口文件，你打包入口文件可能是main-prod.js）

import './plugins/element.js'

改良之后：

将原本在你的main.js的导入注释掉

//import './plugins/element.js'

在public/index.html下外部导入样式表文件和js文件（版本是你项目的elmeent ui版本变化）

将 Element UI 的样式表文件和 JavaScript 文件直接引入到 public/index.html 中，而不是在 main.js 中导入和注册 Element UI，是因为这种方式可以在应用程序加载时提前加载和应用 Element UI 的样式和脚本，以提高应用程序的加载速度。

通过将 Element UI 的样式表文件（如 index.css）作为外部样式表文件引入，浏览器可以在加载应用程序时并行下载样式表文件，而不会阻塞页面的渲染。这样可以让页面尽早应用 Element UI 的样式，使得页面在加载完成后立即具备 Element UI 的样式效果，提供更好的用户体验。

同样地，通过将 Element UI 的 JavaScript 文件（如 index.js）作为外部脚本文件引入，浏览器可以在加载和解析 HTML 文档时并行下载脚本文件。这样可以让脚本文件的下载与 HTML 文档的解析过程并行进行，从而减少了整个应用程序的加载时间。

另外，使用 CDN（内容分发网络）引入 Element UI 的样式表和脚本文件，可以利用 CDN 的高速缓存和分布式服务器，提供更快的网络传输速度和稳定性。CDN 可以根据用户的地理位置选择最近的服务器节点进行内容传输，进一步加速文件的下载和应用。

为什么是放在public/index.html文件下呢？ public/index.html 是 Vue 2 项目中的主 HTML 文件，也是整个应用程序的入口文件。它是在构建 Vue 2 项目时自动生成的，用于承载应用程序的整体结构和内容。

4.通过 externals 加载外部 CDN 资源

在做项目的时候总是会导入第三方库，我们都是下载到本地然后运用，所以引用网络的资源进行第三方库导入是一个很不错的优化策略

首先在你的vue.config.js的打包模式里面加入这段内容

module.exports = { chainWebpack: config => { // 打包模式 config.when(process.env.NODE_ENV === 'production', config => { config .entry('app') .clear() .add('./src/main-prod.js')

// 通过 externals 加载外部 CDN 资源
  config.set('externals', {
    vue: 'Vue','vue-router': 'VueRouter',
    axios: 'axios',
    lodash: '_',
    echarts: 'echarts',
    'vue-quill-editor': 'VueQuillEditor'
  })

})

// 开发模式
config.when(process.env.NODE_ENV === 'development', config => {
  config
    .entry('app')
    .clear()
    .add('./src/main-dev.js')
})

} }

然后在public/index.html文件下导入资源以下是举例导入vue2、路由、axios三方库

<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js"

需要注意的是，在使用外部文件引入的方式时，确保文件的路径和版本号正确，并且可靠的 CDN 或服务器上提供了所需的文件。这样可以确保应用程序在任何环境中都能正确地加载和使用外部的 JavaScript 和 CSS 文件。