The problems were all encountered in the project, so they were documented.
The front-end navigation
Only summed up the pro test effect of several obvious solutions, most of the solutions come from the daily summary and the various leaders, if there is insufficient, please supplement ~
1. Lazy route loading
In Webpack, we can use dynamicsimportSyntax to define code split points:import('./Foo.vue') / / return PromiseIf you are using Babel, you will need to add syntax-dynamic-importPlug-in to enable Babel to parse the syntax correctly. Combining the two, this is how to define an asynchronous component that can be partitioned by Webpack automatic code.const Foo = () = > import('./Foo.vue'Nothing needs to change in the routing configuration, just use Foo as usual:const router = new VueRouter({
routes: [{path: '/foo'.component: Foo }
]
})
Copy the codeServer and Webpack are packaged together to configure Gzip
Gzip stands for GNU Zip and, as the name implies, is a compression technology. It compresses the file requested by the browser on the server first, and then passes it to the browser, which decompresses the file and then parses the page. After Gzip support is enabled on the server side, the front-end needs to provide resource Compression packages, which are provided by Compression- webpack-plugin build// Install the plug-in
cnpm i --save-dev compression-webpack-plugin
// Add it to vue-config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js'.'css'];
const isProduction = process.env.NODE_ENV === 'production'; .module.exports = {
....
/ / configuration webpack
configureWebpack: config= > {
if (isProduction) {
// Enable gzip compression
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip'.test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240.minRatio: 0.8}}}}))Copy the code3. Optimize packaging chunk-vendor.js file size is too large
When we run the project and pack, we find that the chunk-vendors. Js file is very large, and that's because Webpack compresses all the dependencies into this file, so we can split it up and pack all the dependencies into separate JS.// Add it to vue-config.js.module.exports = {
....
/ / configuration webpack
configureWebpack: config= > {
if (isProduction) {
// Enable separate js
config.optimization = {
runtimeChunk: 'single'.splitChunks: {
chunks: 'all'.maxInitialRequests: Infinity.minSize: 20000.cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?) (/ / \ \ | $) /) [1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace(The '@'.' ')}`}}}}}; }}}// At this point, you will find that the original Vender file is gone, and there are several dependent JS files
Copy the code4. Enable CDN acceleration
Gzip has reduced the file size by two thirds, but this is still not enough. We then isolate the code or libraries that are unlikely to change, continue to reduce the individual chunk-vendors, and then accelerate the load of resources by CDN loading.// Modify vue.config.js to separate uncommon code libraries
// Webpack can also be introduced directly in index.html if it is not configured
module.exports = {
configureWebpack: config= > {
if (isProduction) {
config.externals = {
'vue': 'Vue'.'vue-router': 'VueRouter'.'moment': 'moment'}}}}// Load in index.html from the public folder<! -- CND --><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
Copy the code5. Complete vue.config.js code
const path = require('path')
// Add it to vue-config.js
// Enable gzip compression
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// Determine the development environment
const isProduction = process.env.NODE_ENV === 'production';
const resolve = dir= > {
return path.join(__dirname, dir)
}
// Project deployment base
// By default, we assume that your application will be deployed in the root directory of the domain,
// Example: https://www.my-app.com/
// Default: '/'
// If your application is deployed in a subpath, you need to specify the subpath here
/ / such as: https://www.foobar.com/my-app/
// Need to change it to '/my-app/'
/ / iview - admin online demo package path: https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
? '/'
: '/'
module.exports = {
/ / webpack configuration
configureWebpack:config= > {
// Enable gzip compression
if (isProduction) {
config.plugins.push(new CompressionWebpackPlugin({
algorithm: 'gzip'.test: /\.js$|\.html$|\.json$|\.css/,
threshold: 10240.minRatio: 0.8
}));
// Enable separate js
config.optimization = {
runtimeChunk: 'single'.splitChunks: {
chunks: 'all'.maxInitialRequests: Infinity.minSize: 20000.cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?) (/ / \ \ | $) /) [1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace(The '@'.' ')}`}}}}};// Unpack the webpack warning
config.performance = {
hints:'warning'.// The maximum volume of the entry point
maxEntrypointSize: 50000000.// The maximum size of the generated file
maxAssetSize: 30000000.// Give only performance hints for js files
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js'); }}}},// Project deployment base
// By default we assume your app will be deployed at the root of a domain,
// e.g. https://www.my-app.com/
// If your app is deployed at a sub-path, you will need to specify that
// sub-path here. For example, if your app is deployed at
// https://www.foobar.com/my-app/
// then change this to '/my-app/'
publicPath: BASE_URL,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
devServer: {
host: 'localhost'.port: 8080./ / the port number
hotOnly: false.https: false.// https:{type:Boolean}
open: true.// Configure automatic browser startup
proxy:null // Configure cross-domain processing with only one agent
},
// If you don't need eslint, set lintOnSave to false
lintOnSave: true.css: {loaderOptions: {less: {javascriptEnabled:true}},extract: true.// Whether to use CSS ExtractTextPlugin
sourceMap: false.// Enable CSS source maps
modules: false// Enable CSS modules for all CSS/pre-processor files.
},
chainWebpack: config= > {
config.resolve.alias
.set(The '@', resolve('src')) // set('@@', resolve(' SRC /components'))
.set('@c', resolve('src/components'))},// No.map file is generated during packaging
productionSourceMap: false
If the proxy is set, then the baseUrl of axios in your local development environment should be written as "", i.e., an empty string
// devServer: {
// proxy: 'localhost:3000'
// }
}
Copy the code