1. Project optimization strategy
1.1 generate packaging Report
View the report directly through the visual UI panel (recommended) task = > build
In the visual UI panel, you can easily see the problems in the project through the console and analysis panel.
1.2 via Vue config. JS to modify the default configuration of webpack
// vue.config.js
// In this file, you should export an object that contains custom configuration options
module.exports = {
// Options
}
1.3 specify different packaging entry for development mode and release mode
By default, the development mode and publishing mode of Vue project share the same packaged entry file (src/main.js)
The development process of is separated from the release process. We can specify the packaged entry file for each of the two modes, namely:
① The entry file of the development mode is src/main-dev.js
② The entry file for publishing mode is src/main-prod.js
1.4 configureWebpack and chainWebpack
In Vue config. In the configuration object exported from. JS, add a configureWebpack or chainWebpack node to customize the packaging configuration of the webpack.
Here, the functions of configureWebpack and chainWebpack are the same. The only difference is that they modify the configuration of webpack
The formula is different:
① chainWebpack modifies the default webpack configuration in the form of chain programming
② configureWebpack modifies the default webpack configuration in the form of an operation object
For specific differences between the two, please refer to the following website:
https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3
1.5 customize the packaging entry through chainWebpack
// Create main-prod.js and main-dev.jsdev js
module.exports = {
chainWebpack: config => {
// Production environment config When judge process env. NODE_ Env gets the current compilation mode
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
})
// development environment
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, the third-party dependency packages imported through import syntax will eventually be packaged and merged into the same file, resulting in the problem of large single file volume after successful packaging.
To solve the above problems, you can configure and load external CDN resources through the external node of webpack. Third party dependent packages declared in externals are not packaged. Generally, you add production in publishing mode
If there is this package, it will be directly searched globally
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
At the same time, it needs to be in public / index Add the following CDN resource reference to the header of the HTML file: comment out the CDN resources in the production environment
<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> <!-- Rich text editor js file --> <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
1.7 optimize the packaging of ElementUI through CDN
In the development phase, we enabled the on-demand loading of element UI components to reduce the packaging volume as much as possible, but the components loaded on demand still occupy a large file volume.
At this time, we can load the components in the element UI in the form of CDN, which can further reduce the volume of the packaged file.
The specific operation process is as follows:
① In main-prod.js, comment out the element UI on-demand code
② In index In the header area of HTML, the js and css styles of element UI are loaded through CDN
<!-- element-ui Style sheet file for --> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" /> <!-- element-ui of js file --> <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
1.8 homepage content customization
The content of the home page may be different in different packaging environments. We can customize it through plug-ins. The plug-in configuration is as follows:
chainWebpack: config => {
config.when(process.env.NODE_ENV === 'production', config => {
// Modify fixed configuration item
config.plugin('html').tap(args => {
// Custom field
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 routing lazy loading
When you package a build project, the JavaScript package becomes very large, affecting page loading. 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.
Three steps are required:
① Install the @ Babel / plugin syntax dynamic import package. [development dependency in vue ui panel]
② In Babel config. The plug-in is declared in the. JS configuration file.
③ Change the route to load on demand. The example code is as follows:
// webpackChunkName: the group name (all routes of the same group will be loaded when loading) is followed by the path // Comment out the previous 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 the detailed document of route lazy loading, please refer to the following link:
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
2. Project launch
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 codes are as follows:
const express = require('express')
// Create web server
const app = express()
// Managed static resources
app.use(express.static('./dist'))
// Start the web server
app.listen(80, () => {
console.log('web server running at http://127.0.0.1')
})
Then manage the server through pm2
2. Enable gzip configuration
Using gzip can reduce the file size and make the transfer speed faster.
② You can use Express for gzip compression on the server side. Its configuration is as follows:
// Install the appropriate package
npm install compression -S
// Import package
const compression = require('compression');
// Enabling middleware should be written before static resource hosting
app.use(compression());
3. Configure https service
Why enable HTTPS service?
The data transmitted by the traditional HTTP protocol is plaintext, which is not safe
HTTPS protocol is used to encrypt the transmitted data, which can prevent the data from being stolen by intermediaries and make it safer to use
Request SSL certificate( https://freessl.org )
① Enter https://freessl.cn/ Official website, enter the domain name to apply for and select the brand.
② Enter your own mailbox and select relevant options.
③ Verify DNS (add TXT record in the background of domain name management).
④ After verification, download the SSL certificate(
full_chain.pem public key; private.key (private key)
...
4. Use pm2 to manage applications ⭐
Managing applications using pm2
You don't have to open the command line window anymore
① Install pm2 in the server: npm i pm2 -g
② Start project: pm2 start script (entry file) -- name user defined name
③ View run item: pm2 ls
④ Restart project: pm2 restart custom name (or id)
⑤ Stop item: pm2 stop custom name (or id)
⑥ Delete item: pm2 delete user-defined name (or id)