current position：Home>Webpack packaging optimization solution

Webpack packaging optimization solution

2022-01-27 07:05:04 【Peng Shiyu】

Tools ：

  • webpack-bundle-analyzer View all packages and volume size of the project

1、 Road load by lazy 

component: () => import('@/views/index'),

2、CDN Introducing external extensions

At home CDN: https://www.bootcdn.cn/

<script src="XXX/cdn/vue.min.js"></script>

webpack To configure externals

module.exports = {
    
    externals: {
    
        'vue': 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter'
        ...
    }
}

3、 Code splitting

4、DLL Way to pull away from public dependence

5、gZip Accelerate optimization

vue-cli The default production environment will be gZip Compress ,Nginx Also support

6、 Production environment shut down productionSourceMap

vue.config.js

productionSourceMap: false,

Reference resources
webpack Package optimization solution
Webpack Packing is too slow ? try Dllplugin
webpack Packaging performance optimization
vue Causes and optimization of page white screen

copyright notice
author[Peng Shiyu],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270704581173.html

The sidebar is recommended

guess what you like

Random recommended