1. I saw my project yesterday. Every time I packed it, it was 30M about , I think this packaged dist The file is too big , Can you make it smaller ,

Then look at the information on the Internet , Provides a lot of optimization methods , But I only used one , Let's continue to optimize later .

Open the project folder . find config Folder ----> open index.js file ,

 1 module.exports ={
2 dev:{
3
4 .....
5 } ,
6
7 build:{
8 productionSourceMap : false,
9 .....
10 }
11
12
13 }

Just modify such a property , And then pack it up npm run build , Suddenly I found that it was half as small as the previous file , Directly from 30M It's down to 14M about .

This property will generate a lot of .map file , It is convenient to see where the error is when the code goes wrong , I don't use this when I post it online , So decisively changed .

Continue to optimize other places in the future , In constant efforts ...

vue-cli2 Generated project Packaging Optimization ( In continuous learning ) More articles about

  1. vue+webpack+element-ui Project packaging optimization speed and app.js、vendor.js After packing, the file is too large

    I haven't written anything since I started my blog , I've been studying vue+webpack+element-ui Project packaging speed optimization , I want to record the results of these days , Maybe for the front-end cowherd, my technology is better , But I still hope to provide ...

  2. Vue -- vue-cli(vue The scaffold ) npm run build Package optimization

    During this period of time, the company's new projects have been approved , The development team chose Vue2.0 Development . Of course, it is also used vue cli Build automation . Results after the development of the basic version , use npm run build When the command pack comes online , We found the following problems ...

  3. Vue+Webpack And Code and packaging optimization

    This article focuses on Vue Single page application optimization means : Load asynchronously Add... When switching faces loading Special effects Click delay inline manifest Logic code optimization Depending on package volume optimization cdn quote Vue Code optimization Load asynchronously The so-called difference ...

  4. vue-cli webpack2 Project Packaging Optimization

    Reduce the scope of file search To configure resolve.modules Webpack Of resolve.modules Configure the module library ( namely node_modules) Where it is , stay js Appear in import 'vue' ...

  5. Vue After the project is packaged and released CSS The background image in is not displayed

    I believe there are many students studying vue At the beginning of the project, we found that CSS The background image in is not displayed , How to solve this problem only needs to be changed bind Can be configured modify  build/utils.js  Medium  generateLoaders ...

  6. [ Optimize ] In depth learning Normalization Model

    source :https://www.chainnews.com/articles/504060702149.htm Heart of the machine column author : Zhang Junlin Batch Normalization ( abbreviation BN) Since I put forward ...

  7. small Web Page Project packaging optimization scheme

    background    New in the current team Web The project basically adopts Vue or React , add RN, These belong to the heavyweight framework , But for the small Web page , It's too big again . Earlier projects used more primitive HTML ...

  8. vue-cli Project Packaging Optimization (webpack3.0)

    1. modify source-map To configure : This configuration can greatly reduce the volume of packaged files . a. The first change /config/index.js file : // /config/index.js dev Environmental Science :devtool: 'ev ...

  9. once vue-cli 2.x Project packaging optimization experience ( Optimize xlsx plug-in unit )

    One . Analyze the size of each module after packaging use vue-cli Project created , Has integrated webpack-bundle-analyzer. See the document for details build/webpack.prod.conf.js, The code is as follows : if (co ...

  10. be based on Ant Desigin Background management project Packaging Optimization Practice

    background according to Ant Design The official website uses React Backstage projects built by hands , When I first took over the project, it was probably 30 Two routes left and right , My machine is Mac 8G Memory , Packaging takes time to complete 2 About minutes , Decided to optimize . Project technology stack ...

Random recommendation

  1. React Native Changed the World? or Nothing.

    RN It's a awesome Technology , facebook An innovative team has created a new technology that has changed native The development community . however RN It's full of doubts , RN It exists to solve some problems ? A year after its birth , RN It's solved again ...

  2. About asp.net Who can help to solve a little problem of ?

    public IList<Category> Categories { get; set; }        protected void Page_Load(object sender, ...

  3. zend studio 9.0.4 Crack 、 Sinicization and font color and shortcut key related settings

    Reprint :http://www.penglig.com/post-45.html download :http://www.geekso.com/component/zendstudio-downloads/ Crack :h ...

  4. [Google Guava] Study -- New collection type Multimap

    Every experienced Java Programmers have implemented it somewhere Map<K, List<V>> or Map<K, Set<V>>, And endure the awkwardness of the structure . If there is a demand for two ...

  5. September 11th 2016 Week 38th Sunday

    Nothing happens unless first a dream. It all starts with dreams . When everything seems to be going against you, remembe ...

  6. Physical system migration virtualization P2V technology

    The first thing for an enterprise to do after building a virtualization platform is to transfer the existing server application business to a virtual server , This is the first step in virtualizing and consolidating servers , It is also one of the basic functions of virtualization program :P2V The transformation function of . AD:   After the enterprise builds the virtualization platform, the second ...

  7. Set sail again , One of my study notes JavaScript Design patterns 17( Template method pattern )

    Template method pattern Starting from the template method pattern, we officially bid farewell to the structural design pattern , Start learning and sharing behavioral design patterns Behavioral design patterns are used to divide responsibilities or abstract algorithms among different objects , Behavioral design patterns are not just about classes and objects , It also involves communication between classes or objects ...

  8. ST Take notes

    ST A watch is a use of DP A multiplication algorithm for finding the maximum value ST Tables are often used to solve RMQ problem , That is to solve the interval maximum problem Next, take the maximum value as an example to explain step by step ST The process of creating a table : 1. Definition f[i][j] Express [i,i+2j-1] This length ...

  9. centos install RabbitMQ 3.7.9 ( Use RPM)

    We mentioned not to use RPM install RabbitMQ 3.7.8, In fact, I personally prefer not to use RPM install RabbitMQ, Because the installation position and setting parameters can be controlled . Existence is reason , Use RPM install RabbitMQ, You can reduce configuration parameters ...

  10. Paper reading notes :【Transforming Auto-encoders】

    [Transforming Auto-encoders]: G E Hinton, A Krizhevsky, S D Wang. Transforming auto-encoders[C]. //I ...