zoukankan      html  css  js  c++  java
  • webpack打包速度优化

    配置resolve.modules

    webpack默认顺序是在当前模块的node_modules目录下,没找到再去上级目录寻找,一般一个项目只有一个根目录下的node_modules,配置指明存放第三方模块的绝对路径可以减少寻址

    module.exports = {
        resolve: {
            modules: [
                path.resolve(__dirname, 'node_modules')
            ]
        }
    }
    

    配置loadersincludeexclude

    include:要处理的目录
    exclude:不处理的目录

    通过配置这两项属性可以减少不必要遍历从而提高打包性能

    loaders: [
        {
            test: /.vue$/,
            loader: 'vue-loader',
            include: [path.resolve(__dirname, 'src')],
            exclude: /node_modules/
        }
    ]
    

    使用happypack

    happypack:开启系统CPU最大线程,通过插件将loader包装,暴露id,直接module.loaders引用该id

    plugins: [
        new HappyPack({
            id: 'js',
            threads: 4,//线程数
            loaders: ['babel-loader']
        })
    ],
    loaders: [{
        test: /.js$/,
        loader: 'babel',
        happy: { id: 'js' }
    }]
    

    externals

    externals去除不需要打包的静态资源,使用CDN加载

    externals: {
        'jquery': 'jQuery'
    }
    

    CND引用

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    

    cache-loader

    将loader编译结果写入缓存,再次构建如果文件没有发生变化则会直接拉取缓存,添加在时间长的 loader 的最前面。

    {
        test: /.ext$/,
        use: ['cache-loader', ...loaders],
        include: path.resolve('src'),
    },
    
  • 相关阅读:
    Linux rcp命令详解
    Linux patch命令详解
    Linux paste命令详解
    linux od命令详解
    linux mv命令详解
    Linux more命令详解
    Linux mktemp命令
    MySQL状态变量详解
    mysql性能分析show profile/show profiles
    MySQL执行计划
  • 原文地址:https://www.cnblogs.com/aeipyuan/p/13234517.html
Copyright © 2011-2022 走看看