vue项目打包以及优化的实现步骤

vue项目的打包上线及优化

项目完成，我们会将项目进行上线，为了提升性能，我们往往会进行一些优化处理

vue项目的打包

脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对项目进行打包

打开终端，切换到项目根目录

输入命令：npm run build

会在当前项目的根目录下生成一个dist文件夹，里面就是打包后的文件

项目托管

我们可以创建一个简易的node服务器来托管打包后的项目，这样就可以模拟访问服务器的项目

1.创建一个新的目录做为服务器根目录，小黑窗执行node init -y执行初始化，再执行npm i express下载express包，然后创建app.js文件将下面代码拷贝进来(利用express包开一个服务器)

2.将刚刚打包生成的dist目录整体拷贝到node服务器目录下

3.资源在dist目录下，所以可以使用静态资源托管的方式提供资源，将dist目录做为资源托管目录

express创建服务器

var express = require('express')const path = require('path')// 2. 创建服务器var app = express();// 托管静态资源// 也可以将所有静态资源放置到指定的目录下，如public,然后添加以下的配置app.use(express.static('dist'))app.use('/', express.static(path.join(__dirname, 'dist')))// 3. 开启服务器并监听端口app.listen(3001, () => {  console.log('http://127.0.0.1:3001')})

启动服务器

在服务器目录下打开终端，输入node app.js

在浏览器中输入服务器地址

项目的常见优化

项目打包之后，会将之前所使用到的部署依赖包和项目中使用到的外部资源都打包

如果之前引入的包很多，或者引入的不必需的包，那么会增大项目的体积，从而造成用户访问的时候需要请求更多的数据才能正常的访问，不利于用户体验，所以需要对打包过程进行优化

一般情况下我们可以从优化代码的方面对项目进行优化，也可以使用类似cdn的方式对项目进行优化

脚手架中提供了一个命令，可以让我们看到项目的资源的分布(占用)情况：npm run build
JS实现微信"炸屎"大作战功能
Angular封装WangEditor富文本组件的方法