preface

This tutorial takes you through the development of an out-of-the-box mobile H5 development framework using Vue-CLI3.0. This chapter covers the preparatory work before formal development.

Remote Access Configuration

Use extranet penetrating and cross-domain configurations

Cross-domain problems are often encountered when linking projects, which are usually handled by the backend, but if someone else has something to do, you have to configure cross-domain yourself.

Local projects can be previewed remotely using NetApp’s extranet proxy, so you can preview your local projects even if you are not in a region.

DisableHostCheck: true, // Proxy: {'/ API ': {target: '', ws: true, changeOrigin: true } } },Copy the code

Optimized the packaging of the chunk-faints.js file to be too large

When we run the project and package it, the chunk-pdF.js file is quite large. That’s because WebPack has compressed all the dependencies into this file, so we can split it up and package all the dependencies into a separate JS.

Each dependency package is individually packaged with splitChunks, configured in a production environment as follows

ConfigureWebpack: (config) => {if (process.env.node_env === 'production') {// Modify configuration for production environment... Config.mode = 'production' // Package each dependency into a separate JS file let optimization = {runtimeChunk: 'single', splitChunks: {chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, dependencies over 20000bit will be packaged separately 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('@', '')}` } } } } } Object.assign(config, {optimization})} else {// modify the configuration for the development environment... Config. Mode = 'development'} object.assign (config, {// resolve: {alias: {'@': path.resolve(__dirname, './src'), '@c': path.resolve(__dirname, './src/components'), '@p': Path. The resolve (__dirname, '. / SRC/pages')}}})} / / alias configurationCopy the code

Remove print information when packaging (console)

To remove all log information when going into production, the code is as follows:

If (process.env.vue_app_env === 'production') {// Modify the configuration for production... Config. Mode = 'production' / / remove print log config. The optimization. The minimizer [0]. Options.terserOptions.com. Press drop_console = true }}Copy the code

Note: Avoid using object. assign for configuration merge, otherwise removing printed information will be invalid. The exact cause is unknown, and IT took me a long time to find it.

Enable GIzP compression

Gizp compression is an HTTP request optimization that reduces file size to increase load speed. It can be used to compress HTML, JS, CSS files and even JSON data, reducing the volume by more than 60%. The Compression WebPack plugin enables GZIP compression for webPack packaging.

01. Download compression Webpack plugin

 npm install -D compression-webpack-plugin
Copy the code

02. Add the openGzip field to package.json to enable giZp

{" name ":" demo - cli3 ", "version" : "1.0.0", "openGizp" : false,... }Copy the code

The configuration in 03.vue.config.js is as follows

const CompressionPlugin = require("compression-webpack-plugin"); . ConfigureWebpack: (config) => {if (process.env.node_env === 'production') {// Modify configuration for production environment... config.mode = 'production'; // Package each dependency into a separate JS file... if(openGzip){ config.plugins = [ ...config.plugins, new CompressionPlugin({ test:/\.js$|\.html$|\.css/, // Match file name threshold: 10240,// for data compression over 10K deleteOriginalAssets: false // do not delete the source file})]}} else {// Modify the configuration for the development environment... config.mode = 'development'; }... },...Copy the code

04. Gzip nginx configuration

gzip on; # Enable/disable gzip on off gzip_min_length 5k; Gzip_buffers 4 16k; Gzip_comp_level 8; # Compression level :1-10, the larger the number, the better. Gzip_types text/plain application/ X-javascript application/javascript text/ CSS application/ XML text/javascript application/x-httpd-php image/jpeg image/gif image/png; # compressed file type gzip_vary on; Some browsers support compression, some do not, so avoid wasting unsupported compression. Therefore, determine whether compression is needed based on the HTTP header of the clientCopy the code

After the modification, run nginx -s reload

Most browsers already support the. Gz resource file. You can see accept-encoding :gzip in the Request Headers of HTTP requests

Add the version number to the packaged JS name

The configuration in vue.config.js is as follows

. let { version , openGzip } = require('./package.json'); version = version.replace(/\./g,'_'); . module.exports = { assetsDir: "static", configureWebpack: (config) => {if (process.env.node_env === 'production') {// Modify the configuration for the production environment... config.mode = 'production'; . Object.assign(config, { output:{ ... config.output, filename: `static/js/[name].[chunkhash].${version}.js`, chunkFilename: `static/js/[name].[chunkhash].${version}.js` }, ... }); . } else {// modify the configuration for the development environment... config.mode = 'development'; }... }}...Copy the code

All configuration files

const autoprefixer = require('autoprefixer'); const pxtorem = require('postcss-pxtorem'); const CompressionPlugin = require("compression-webpack-plugin"); let { version, openGzip } = require('./package.json'); version = version.replace(/\./g,'_'); Module. Exports = {// // // // // // // // // // // '/', // build output directory outputDir: 'dist', // Static resource directory (js, CSS, img, fonts) assetsDir: 'assets', // close the map file productionSourceMap: False, // specify the package directory outputDir: process.env.outputDir, // Configure devServer for remote access: {// netApp External network penetrating use // disableHostCheck: True, / / / / proxy cross-domain configuration: {/ / '/ API: {/ / target: "', / / ws: true, / / changeOrigin: true / /} / /}}, / / CSS configuration CSS: { loaderOptions: { postcss: { plugins: [ autoprefixer({ overrideBrowserslist: }), pxtorem({rootValue: 37.5, propList: ['*', '! Font *'],//! })]}}}, // webPack configureWebpack: If (process.env.vue_app_env === 'production') {// Modify the configuration for production... Config. Mode = 'production' / / remove print log config. The optimization. The minimizer [0]. Options.terserOptions.com. Press drop_console = true / / each dependent on bag packaged into separate js config file. The optimization. The runtimeChunk = 'single' config. Optimization. SplitChunks = {chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, dependencies over 20000bit will be packaged separately 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('@', If (openGzip){config.plugins = [...config.plugins, New CompressionPlugin ({test: / \. Js $| \. HTML $| \. CSS /, / / matching filename threshold: 10240, the data of more than 10 k / / compression deleteOriginalAssets: False // do not delete the source file})]} // Configure the package js to increase the version number to avoid caching causes the display to not update config.output = {... config.output, filename: `assets/js/[name].[chunkhash].${version}.js`, chunkFilename: ` assets/js / [name] [chunkhash]. ${version}. Js `}} else {/ / modify configuration for the development of environment... config.mode = 'development' } } }Copy the code

Duang summary

Fast development of VUE Mobile H5 development framework