zoukankan      html  css  js  c++  java
  • webpack-性能优化

    1.跟上技术的迭代(node,webpack,yarn) 

    2.在尽可能少的模块上应用Loader

    3.plugin尽可能精简并确保可靠

    4.resolve参数合理配置:

      有时候我们引入vue文件时不会跟上后缀,如 import Header from './header'; 实际上应该是 import Header from './header.vue'; 那是因为我们可以配置:

    resolve:{
        extensions:['.js','.vue']   // 不要过多配置,会降低打包速度
    }

      那么当我们不写后缀的时候,会先去找js,然后是vue后缀,找到即可返回 当我们这样使用:import Header from './child/';默认会去找child目录下的index.js或者index.vue,但是如果我们是想要找child.js/child.vue,也可以通过配置:

    resolve:{
        extensions:['.js','.vue'],
        mainFiles:['index','child']     // 不要过多配置,会降低打包速度
    }

      以上配置会先去找index,如果不存在,再去找child ---- 一般不会配这玩意儿

      别名:

    resolve:{
        @:path.resolve(__dirname,'../src')
    }
    import header from '@/header';

      它指向src目录

    5.使用DllPlugin提高打包速度

      当我们在打包的时候有些公共库的代码,如lodash.js是不会改变的,那么我们只需要在第一次打包的时候分析,后面就不要再分析了。我们可以新增一个文件(webpack.dll.js):

    const path=require('path');
        module.exports={
            entry:{
                vendors:['react','react-dom','lodash']
            },
            output:{
                filename:'[name].dll.js',
                path:path.resolve(__dirname,'../dll'),
                library:'[name]'
            }
        }

      package.json中新增命令:

    "build:dll":"webpack --config ./build/webpack.dll.js"

      这个时候进行打包会生成一个vendors.dll.js,要使用它还需要在webpack.common.js中使用一个插件:

      npm install add-asset-webpack-plugin --save

    const AddAssetWebpackPlugin=require('add-asset-webpack-plugin');
        plugins:[
            ...
            new AddAssetWebpackPlugin({
                filepath:path.resolve(__dirname,'../dll/vendors.dll.js')
            })
        ]

      这个时候所有的第三方模块实现了一次打包,但是业务中还是使用了node_modules中的模块,而没有使用vendors.dll.js中的模块,下一步需要实现的就是使用dll文件中的第三方模块。

      我们需要在webpack.dll.js中使用一个插件:

    const webpack=require('webpack');
        plugins:[
            new webpack.DllPlugin({
                name:'[name]',
                path:path.resolve(__dirname,'../dll/[name].manifest.json')  // 会生成一个映射文件
            })
        ]
        还要在webpack.common.js中使用一个插件:
        plugins:[
            ...
            new DllReferencePlugin({
                manifest:path.resolve(__dirname,'../dll.vendors.manifest.json')
            })
        ]

      我们不止可以增加vendors,还可以增加多个,也可以动态添加,自行百度

    6.控制包文件大小

    7.thread-loader、parallel-webpack、happypack多进程打包

    8.合理使用sourceMap

    9.结合stats分析打包结果

    10.开发环境内存编译

    11.开发环境无用插件剔除

  • 相关阅读:
    存储那些事儿(二): 下一代Linux文件系统BTRFS简介
    RabbitMQ消息队列的小伙伴: ProtoBuf(Google Protocol Buffer)
    RabbitMQ消息队列(七):适用于云计算集群的远程调用(RPC)
    RabbitMQ消息队列(六):使用主题进行消息分发
    C++内存管理之shared_ptr
    C++程序调试方式总结
    匿名对象?临时对象?
    C++多态中虚函数表合并与继承问题
    C++继承体系中的内存分段
    C++继承体系中的内存对齐
  • 原文地址:https://www.cnblogs.com/jingouli/p/12336173.html
Copyright © 2011-2022 走看看