Analysis distal item 1 to be optimized Optimization

Term analysis to be optimized

Packaging Project Resource Analysis

Now do use mainstream framework for the development, mostly packaged go through this process, the core code and introduction of third-party modules to package, but often find that packaged the results unsatisfactory, where the use of a tool can analyze a package file the constitution.

Packing visualization analysis tool: WebPACK-the bundle-Analyzer

1. Download and install

npm install webpack-bundle-analyzer --save-dev 

2. vue.config.js Configuration

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    ...
    chainWebpack:(config)={
        if(process.env.NODE_ENV === 'production'&&process.env.npm_config_report){
            config
            .plugin('webpack-bundel-analyze')
            .use(BundleAnalyzerPlugin)
            .end()
        }
    }
}

3. Configure start command package.josn

{
    ...
    "scripts":{
        "report":"npm_config_report= true npm run build "
    }
}

4. use

   
   npm run  report  

Constitution can browse through the command to open a local server at the same time packed files

5.效果展示

![image](https://user-gold-cdn.xitu.io/2020/3/15/170dea38a55725bf?w=2252&h=1228&f=png&s=2097017)

--- 
![个人公众号](https://user-gold-cdn.xitu.io/2020/3/15/170dea4164f6e97d?w=258&h=258&f=jpeg&s=28190)