1. Project optimization strategy
1.1 Generate package report
View the report directly through the visual UI panel (recommended) task => build
In the visualized UI panel, through the console and the analysis panel, you can easily see the problems existing in the project.
1.2 Modify the default configuration of webpack through vue.config.js
// vue.config.js
// 这个文件中，应该导出一个包含了自定义配置选项的对象
module.exports = {
// 选项...
}
1.3 Specify different packaging entries for development mode and release mode
By default, the development mode and release mode of the Vue project share the same packaged entry file (ie src/main.js). In order to project
The development process is separated from the release process. We can specify the packaged entry file for each of the two modes, namely:
① The entry file for development mode is src/main-dev.js
② The entry file for release mode is src/main-prod.js
1.4 configureWebpack and chainWebpack
In the configuration object exported by vue.config.js, add a configureWebpack or chainWebpack node to customize the packaging configuration of webpack.
Here, configureWebpack and chainWebpack do the same thing, the only difference is how they modify the webpack configuration
The formula is different:
① chainWebpack modifies the default webpack configuration through chain programming
② configureWebpack modifies the default webpack configuration by operating objects
For specific usage differences between the two, please refer to the following URLs:
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3
1.5 Customize the packaging entry through chainWebpack
// 创建main-prod.js和main-dev.jsdev.js
module.exports = {
chainWebpack: config => {
// 生产环境 config.when判断 process.env.NODE_ENV拿到当前编译模式
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')
})
}
}
1.6 Load external CDN resources through externals
By default, third-party dependent packages imported through the import syntax will eventually be packaged and merged into the same file, resulting in the problem that the size of a single file is too large after the package is successful.
To solve the above problems, you can configure and load external CDN resources through the externals node of webpack. All third-party dependent packages declared in externals will not be packaged. Generally add production in release mode
If you have this package, you will go directly to the global search
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
At the same time, you need to add the following CDN resource reference at the head of the public/index.html file: comment out the
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
<script src="https://cdn.staticfile.org/vue/2.6.1/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script>
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>
1.7 Optimizing the packaging of ElementUI through CDN
Although in the development stage, we enabled the on-demand loading of element-ui components to reduce the packaging volume as much as possible, but those components that are loaded on demand still take up a large file size.
At this point, we can also load the components in element-ui through CDN, which can further reduce the packaged file size.
The specific operation process is as follows:
① In main-prod.js, comment out the code loaded by element-ui on demand
② In the head area of index.html, load the js and css styles of element-ui through CDN
<!-- element-ui 的样式表文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" />
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
1.8 Home page content customization
Under different packaging environments, the contents of the home page may be different. We can customize it through plug-ins. The plug-in configuration is as follows:
chainWebpack: config => {
config.when(process.env.NODE_ENV === 'production', config => {
// 修改固定配置项
config.plugin('html').tap(args => {
// 自定义字段
args[0].isProd = true
return args
})
})
config.when(process.env.NODE_ENV === 'development', config => {
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
}
1.9 Lazy loading of routes
When bundling a build project, JavaScript bundles can become very large, affecting page load. If we can divide the components corresponding to different routes into
Different code blocks, and then load the corresponding components when the route is accessed, which is more efficient.
Specifically, 3 steps are required:
① Install the @babel/plugin-syntax-dynamic-import package. [Development dependencies in the vue ui panel]
② Declare the plugin in the babel.config.js configuration file.
③ Change the route to the form of loading on demand, the sample code is as follows:
// webpackChunkName:分组名(加载的时候就会加载同一组的所有路由) 后面是路径
// 要注释掉之前的import
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-boo" */ './Baz.vue')
For detailed documentation on lazy loading of routes, please refer to the following links:
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
2. Project launched
1. Create a web server through node
Create a node project, install express, quickly create a web server through express, package the dist folder generated by vue, and host it as a static resource. The key code is as follows:
const express = require('express')
// 创建 web 服务器
const app = express()
// 托管静态资源
app.use(express.static('./dist'))
// 启动 web 服务器
app.listen(80, () => {
console.log('web server running at http://127.0.0.1')
})
Then manage the server through pm2
2. Turn on gzip configuration
Using gzip can reduce the file size and make the transfer faster.
② You can use Express to do gzip compression on the server side. Its configuration is as follows:
// 安装相应包
npm install compression -S
// 导入包
const compression = require('compression');
// 启用中间件 要写在静态资源托管之前
app.use(compression());
3. Configure https service
Why enable HTTPS service?
The data transmitted by the traditional HTTP protocol is clear text, which is not safe
The HTTPS protocol is used to encrypt the transmitted data, which can prevent the data from being stolen by the middleman and make it safer to use
Apply for an SSL certificate (https://freessl.org)
① Enter https://freessl.cn/ official website, enter the domain name you want to apply for and select the brand.
② Enter your own email address and select related options.
③ Verify DNS (add TXT record in domain name management background).
④ After the verification is passed, download the SSL certificate (
full_chain.pem public key; private.key private key)
…
4. Use pm2 to manage applications⭐
Use pm2 to manage applications
You can no longer open the command line window
① Install pm2 in the server: npm i pm2 -g
② Startup project: pm2 start script (entry file) --name custom name
③ View running items: pm2 ls
④ Restart the project: pm2 restart custom name (or id)
⑤ Stop project: pm2 stop custom name (or id)
⑥ Delete item: pm2 delete custom name (or id)