1、vite是什么

vite是一个由Vue.js作者尤雨溪开发的构建工具，它利用了ES Module Imports，在开发环境下可以实现按需编译，加快了开发速度。而在生产环境下，它使用Rollup进行打包，提供更好的tree-shaking、代码压缩和性能优化。

vite主要解决了现有工具（如webpack、rollup）在大型项目开发过程中存在的启动慢、热更新慢等问题。vite致力于为现代前端工作流提供一个更快、更轻的解决方案。

2、webpack是什么

webpack是一个静态模块打包器，可以把各种资源如JavaScript、CSS、图片等都视为模块，然后将这些模块打包成一份或多份优化的资源。webpack提供了丰富的API和生态，用户可以通过插件和loader来扩展webpack的功能。

webpack通过一种叫做loader的机制来处理非JavaScript类型的文件，并且可以把这些文件打包成合适的格式供浏览器使用。除此之外，webpack还具有代码拆分、优化、模块热替换等强大功能。

比如在一个React项目中，我们可以使用Babel Loader把JSX和ES6语法转换为浏览器可识别的JavaScript语法，使用CSS Loader和Style Loader来处理CSS文件，使用File Loader来处理图片等文件。

无论是在开发环境中进行模块热替换，还是在生产环境中进行代码拆分和优化，webpack都能够很好的完成任务，它在前端构建工具中有着广泛的应用。

vite和webpack的区别：

1、基础概念不同；
2、编译方式不同；
3、开发效率不同；
4、扩展性不同；
5、应用场景不同。
总的来说，vite以其更快的编译速度和更低的内存占用率，给前端开发带来了全新的体验，而webpack凭借其高度的自定义性和成熟的生态，仍是前端构建工具的重要选择。

一、基础概念不同

webpack是一个模块打包器，它可以把许多不同类型的模块和资源文件打包为静态资源。它具有高度的可配置性，可以通过插件和loader扩展其功能。

vite，由Vue.js作者尤雨溪开发并维护，是一个基于浏览器原生 ES imports 的开发服务器。它能够提供丰富的功能，如快速冷启动、即时热更新和真正的按需编译等。

二、编译方式不同

webpack在编译过程中，会将所有模块打包为一个bundle.js文件，然后再运行这个文件。

而vite在开发模式下，没有打包的步骤，它利用了浏览器的ES Module Imports特性，只有在真正需要时才编译文件。在生产模式下，vite使用Rollup进行打包，提供更好的tree-shaking，代码压缩和性能优化。

三、开发效率不同

webpack的热更新是全量更新，即使修改一个小文件，也会重新编译整个应用，这在大型应用中可能会导致编译速度变慢。

vite的热更新是增量更新，只更新修改的文件，所以即使在大型应用中也能保持极快的编译速度。

四、扩展性不同

webpack有着成熟的插件生态，几乎可以实现任何你想要的功能，扩展性非常强。

vite虽然也支持插件，但相比webpack的生态，还有一些距离。

五、应用场景不同

webpack由于其丰富的功能和扩展性，适合于大型、复杂的项目。

而vite凭借其轻量和速度，更适合于中小型项目和快速原型开发。

路由异步加载

Vue项目的页面是使用的虚拟路由，页面内容是靠vue-router配置的路由链接来访问的，SPA单页面应用开发，适合开发后台系统，但是对搜索引擎不友好，因为最后只生成一个页面。

搜索引擎是靠页面的链接来爬取网页内容，然后搜录进去搜索引擎数据库的，而vue打包以后的项目只有一个页面，所以其中的内容搜索引擎蜘蛛当然无法收录，这是一个比较不好的地方，当然后期可以进行SEO优化。

所以当你的项目vue组件很多的时候，打包以后的首屏渲染优化就是一个非常重要的问题，改善性能，提高加载打开速度，是很关键的一点。

下面，我就vue中的路由异步懒加载做一个方法分享，建议如果组件不是很多的项目不要使用这种方法，会增加加载时间和速度，对于组件很多的项目可以采用这种方法。

默认es6引入

但是这种方法组件多了，加载就会变慢，打包以后的app.js文件体积会变得非常大，推荐使用后面比较常用的两种。

import example from '../components/example.vue'

vue官方推荐

使用import把组件分割成一个个小的单独的文件，缩小文件体积。webpackChunkName里面的就是这个组件/子组件的打包后的名字。

const example = () => import(/* webpackChunkName: "group-example" */ '../components/example.vue')

require方法

下面就是我比较喜欢的require方法，这个也是可以把组件分割成小的块。

const example = resolve => require(['../components/example.vue'], resolve);

element组件优化

由于是后台项目，所以选择element-ui框架进行后台系统搭建，对这个进行优化也可以减小体积，提高速度和减少加载时间，提高用户体验。

对这个框架的优化可以使用二种方法，但是我还是比较喜欢这种方法，就是对组件不用全局引入，还是改成按需加载的比较好。

全局使用

全局引入和使用

import elementUI from 'element-ui'
Vue.use(elementUI)

这种方法对于只用少量element-ui组件的情况来说，很多组件都是多余的，会无形中加大加载时间和项目打包后的体积，所以使用下面这种按需引入的方法可以有效解决这个问题。

按需引入

// 按需引入
import {
  Form,
  Button,
  Table,
} from 'element-ui'

// 按需使用
Vue.use(Form)
Vue.use(Button)
Vue.use(Table)

还要一些加载和消息提示等的组件

// 按需引入
import {
  Loading,
  Message,
  MessageBox,
  Notification,
} from 'element-ui'

// 按需使用
Vue.use(Loading.directive)
// 挂载到vue实例上面
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification

webpack配置优化

依赖包体积优化

众所周知，日常开发过程中，前端这块早就已经开始进行工程化和组件化开发了，所以免不了下载各种node包，使得打包后的体积也是非常的庞大，下面使用webpack的一个配置外部扩展就可以解决这类问题。

externals配置练习

webpack官方文档是有一个配置用来处理各种依赖包打包优化的，这是【externals外部扩展】。

使用方法：这个案例以jQuery为主。

• 引入cdn,在index.html的head标签中写入。

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>

• 修改webpack配置文件webpack.config.js

属性就是你在项目中引入的名称，后面的值就是jQuery的暴露出的方法名称。

externals: {
  jquery: 'jQuery'
}

• 最后使用

import $ from 'jquery';
$('.my-elem').animate(/*some things*/);

这样三步以后，打包后的文件体积会缩小很多，一个不是很明显，但是很多个包使用这种方法，效果就比较显著了。

externals配置实战

在index.html中引入cdn，以下是几个常见的cdn服务商。

• bootcdn
• 七牛云
• 又拍云
• unpkg
• jsdelivr
• cdnjs

这里使用国内的bootcdn服务，版本的话你自己项目使用的哪个就引入哪个。

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.10.1/index.js"></script>

在webpack配置文件webpack.base.conf.js中entry属性后面加下面一段：

同样的，属性是你在项目中使用的名称，后面的值是包暴露出的方法名称。

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'element-ui': 'elementUI',
  'axios': 'axios',
}

Gzip压缩和sourceMap优化

这个也是压缩文件的一个方法，线上服务器的nginx也开启gzip功能更好；取消资源地图，可以有效保护源码。

在webpack的build文件中，开启Gzip压缩功能和禁用资源地图。

module.exports = {
  // ...
  build: {
    productionSourceMap: false,
    productionGzip: true,
  }
}

这样做的话，打包以后就不会再有sourceMap文件了，也会多了几个以.js.gz后缀名的文件。

项目依赖包统计分析

最后，介绍一点日常开发过程中用到的依赖包分析包，开启以后可以可视化的观察每个包的体积，帮助你整理分析每个包的结构。

webpack配置

• 下载依赖包webpack-bundle-size-analyzer

npm i -D webpack-bundle-size-analyzer

• 引入配置

两种引入方法

// commondjs方法
var WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin;
// es6方法
import { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer';

在webpack的配置文件中插件部分加入：

module.exports = {
  // ...
  plugins: [
    new WebpackBundleSizeAnalyzerPlugin('./reports/plain-report.txt')
  ]
  // ...
}

使用上面配置会生成以下内容：

<webpack-output-path>/reports/plain-report.txt

vue-cli脚手架配置

由于vue-cli已经集成了这个插件，所以使用方法就是下载插件，最后执行命令npm run build --report就可以打包后查看了，会自动在http://localhost:8888打开。