Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to optimize the packaging of Vue projects", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to optimize the packaging of Vue projects" this article.

First, routing lazy loading 1. Why do you need routing lazy loading

When you first run the project, you find that as soon as you enter the page, all the js files and css files are loaded, which is a very time-consuming process. If the js file and css file of the response page are loaded corresponding to which page is opened, the page loading speed will be greatly improved.

two。 How to realize routing lazy loading

Vue official documentation: route lazy loading

The code is as follows (example):

{path:'/ login', component: () = > import ('@ / views/login/index'), hidden: true}, 3. Magic Notes in routing lazy loading

You can customize the name of this file by specifying webpackChunkName in the comment. The code is as follows (example):

Components = () = > import (/ * webpackChunkName: "login" * / ".. / component/Login.vue") 2.Analytical package size 1. Demand

Want to know the amount of space each file takes up in the packaged files. So that we can analyze and optimize the code.

two。 How to generate Packaging Analysis File

Run npm run preview-report in the terminal, and this command will analyze the dependency from our entry main.js to find out the size of each package. Eventually, a report.html file will be generated under the generated dist folder. After opening it, you can see the amount of space we occupy in the project using the file.

(the effect picture is as follows:)

Third, webpack configuration excludes packaging 1. Demand

Exclude some infrequently used packages from the generated package file. For example, xsxl.js and element.js shown in the figure above can be excluded from the packaged files.

two。 Exclude packing

Locate vue.config.js and add the externals entry as follows:

The code is as follows (example):

ConfigureWebpack: {/ / configure the title of the page of a single-page application name: name, externals: {/ * externals object property resolution. * basic format: * 'package name': 'name introduced in the project' * / 'vue':' Vue', 'element-ui':' ElementUI', 'xlsx':' XLSX'}, resolve: {alias: {'@': resolve ('src')}} 4. Reference to network resources 1. Demand

After we have done the previous step, the package generated by the package is much smaller. However, without these dependency packages, there is no way to run the project online. Then we need to reference resources in the network to support the operation of our code.

2.CDN

The full name of CDN is "Content Delivery Network", and it is called content delivery network in Chinese. We use it to improve access speed.

Put some static resources: css, .js, pictures, videos on a third-party CDN server to speed up access.

Benefits:

Reduce the package size of the application package

Speed up access to static resources

Using browser cache, long-term cache of files that will not change

3. Implementation steps

Note: in the development environment, file resources can still be extracted from the local node_modules, but external resources need to be used only when the project is online. At this point, we can use environment variables to distinguish. The details are as follows:

The code is as follows (example):

In the vue.config.js file:

Let externals = {} let cdn = {css: [], js: []} const isProduction = process.env.NODE_ENV = = 'production' / / determine whether it is a production environment if (isProduction) {externals = {/ * externals object attribute resolution: *' package name': 'name introduced in the project' * / 'vue':' Vue', 'element-ui':' ELEMENT' 'xlsx':' XLSX'} cdn = {css: ['https://unpkg.com/element-ui/lib/theme-chalk/index.css' / / element-ui css style sheet], js: [/ / vue must at first! 'https://unpkg.com/vue@2.6.12/dist/vue.js', / / vuejs' https://unpkg.com/element-ui/lib/index.js', / / element-ui js' https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', / / xlsx]}}

Webpack configuration externals configuration item

ConfigureWebpack: {/ / configure the page title of a single-page application name: name, externals: externals, resolve: {alias: {'@': resolve ('src')}

Inject into index.html through html-webpack-plugin: configure in the vue.config.js file:

ChainWebpack (config) {config.plugin ('preload'). Tap () = > [{rel:' preload', fileBlacklist: [/\ .map $/, / hot-update\ .js $/, / runtime\.. *\ .js $/] Include: 'initial'}]) / / inject the cdn variable (executed during packaging) config.plugin (' html') .tap (args = > {args [0] .cdn = cdn / / configure cdn to plug-in return args}) / / omit other.}

Find public/index.html and inject css and js in turn by configuring CDN Config. The content of modifying head is as follows:

Fifth, pack and remove console.log1. Demand

After the project is packaged and launched, remove all console.log from the code

two。 Code demonstration

Configure in the vue.config.js file: the code is as follows (example):

ChainWebpack (config) {config.optimization.minimizer ('terser'). Tap ((args) = > {args [0] .terserOptions.packages. Drop _ console = true return args})} these are all the contents of the article "how to optimize the Packaging of Vue projects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.