本项目是使用vue-cli脚手架完成的,对打包流程以及项目优化整理流程
vue项目的打包
- 在项目的package.json文件中,有个脚本叫:build,在终端中进行运行命令
npm run build
- 命令运行完成后,会在根目录下自动生成一文件夹 :dist
项目托管
- 项目打包完成后,需要上线,现在创建一个node服务器进行托管打包的项目,模拟服务器进行访问
-
- 创建一新文件夹作为根目录创建服务器
-
- 将打包好的dist文件夹复制在服务器文件夹中
-
- express创建服务器
npm i 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的方式进行打包,会大大缩减项目的体积
-
项目原本大小:
-
生成项目报告
1、在项目终端运行命令,会自动生成dist文件夹,里面多了个report.html文件(旧的dist可以删除了)
2、运行report.html文件,可以查看到项目中各依赖包的体积占比- 报告页面中,越大的块说明这个模板占用的体积越大
- 占用体积越越大的模块,我们要考虑不将其打包到产品中
npm run build -- --report
cdn加速优化
- 添加webpack配置 VueCLI wepack相关
1、 在脚手架根目录下创建vue.config.js文件(文件名字必须是这个),在打包的时候,这个配置会 和脚手架的配置组合在一起
2、在vue.config.js 中添加配置,(包的排除,这次将3个占据大的排除)
module.exports = {
configureWebpack: {
externals:{
'vue': 'Vue',
'element-ui': 'ELEMENT',
'quill': 'Quill'
}
},
}
3、在脚手架终端中再次运行 npm run build – --report,再查看报告和文件大小,发生巨大变化
4、加速优化的问题:由于我们是将一些包排除在外,导致我们的项目运行缺少包包无法运行
5、在vue.config.js 中添加cdn的用户自定义,bootcdn官网
let cdn = {
css: [
// element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表
// 富文本框插件样式
'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js', // vuejs
// element-ui js
'https://unpkg.com/element-ui/lib/index.js', // elementUI
// 富文本框插件
'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
]
}
6、 将cdn的资源挂载到插件上 在 vue.config.js 的 module.exports 内添加
// 将cdn的资源挂载到插件上
chainWebpack (config) {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}
7、在页面中使用插件添加指定的cdn资源
添加css引入(head结构中) 循环遍历自动将所有css引入
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" />
<% } %>
添加js引入(body结构中,写在最后)
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
8、设置只有产品阶段才使用cdn
因为项目开发中,没有必要使用cdn,会影响开发效率,在 vue.config.js 中写以下代码
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
10、整体优化完成,重新打包即可
整体 vue.config.js 代码如下:
const isProd = process.env.NODE_ENV === 'production' // 是否生产环境
let externals = {
'vue': 'Vue',
'element-ui': 'ELEMENT',
'quill': 'Quill'
}
let cdn = {
css: [
// element-ui css
'https://unpkg.com/element-ui/lib/theme-chalk/index.css',// 样式表
// 富文本框插件样式
'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.bubble.css'
],
js: [
// vue must at first!
'https://unpkg.com/vue/dist/vue.js', // vuejs
// element-ui js
'https://unpkg.com/element-ui/lib/index.js', // elementUI
// 富文本框插件
'https://cdn.bootcdn.net/ajax/libs/quill/2.0.0-dev.4/quill.js'
]
}
cdn = isProd ? cdn : { css: [], js: [] }
externals = isProd ? externals : {}
module.exports = {
// 添加打包排除,说明以下配置中的包将来不会打包到项目中
configureWebpack: {
externals
},
//
chainWebpack (config) {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
}
}