Mobile front-end optimization, should come to the godfather!

My Directory

1: webpack Recommended articles

2: Ye Chai Recommended articles

3: My project optimization

 

1 >> If the front end is built whine grunt, then the godfather is gulp, as well as the new godfather (webpack):

Webpack can and  Grunt , GULP , Karma  integrates well with existing tools and so on. And it does not Webpack available for download module, but it can be a good fit and the existing package manager, we can still use npm , Bower , the Component and other Web developers to manage your resources, load them in the Webpack.

Article recommend the following:

 Webpack for Web developers and students of the Module Manager: http://hanjianwei.com/2014/09/10/webpack-package-manager-for-web/

 

2 >> There are too many front-end optimization methods worth considering and thinking, best practices before seen the tip of the leaf brother, I feel very enlightening, recommend the following articles:

 On the mobile front-end best practices: http://www.cnblogs.com/yexiaochai/p/4219523.html

 

3 >> I would say I was in my spa project, make a point of introduction for project optimization:   a request to do optimization, do modular work

If MVVM Qindie is Knockout , then it's godfather is estimated that Angular , Avalon , Vue , React , etc., choosing a good mvvm framework is also important to optimize maintenance project, I am not here side dishes for each frame the quality will be explained, I think it is better practice + appropriate scene is the best testing methods, in the framework of my project is selected Vue + Webpack , he has been very concerned about it, I feel it is very focused.

webpack.config.js file configuration is as follows:

 

webpack.config.js The command:

• webpack To compile a development
• webpack -p for building once for production (minification)
• webpack -p For publishing environment to compile (compressed code)
• webpack --watch To continue the development process of incremental compilation (quickly!)
• webpack -d To generate SourceMaps

I think the mobile optimization, one of the most worthwhile optimization, optimization for the request to do, then you have to do the project for modularized.

比如说:开发的时候是这个样子：

index.css
index.js
template.html

最终发布是这个样子：
build1.js

A . 3 request, merged into . 1 th, this optimization is the most obvious.

Screenshot 1:

    

Screenshot 2:

 

 

Reproduced in: https: //www.cnblogs.com/Kummy/p/4431388.html