美文网首页
webpack打包优化

webpack打包优化

作者: visitor009 | 来源:发表于2018-09-29 10:14 被阅读0次

分析打包结果

  1. 生成打包结果webpack –profile –json >stats.json
    将stats.json上传到analyse可视化

运行打包会自动打开一个本地网站

var BundleAnalyzerPlugin   = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins: [
  new BundleAnalyzerPlugin()
]

优化打包速度

  • 区分第三方代码(vender)和业务代码(app)
// webpack.dll.conf.js
const path = require('path');
 const webpack = require('webpack')
 module.exports = {
  entry:{
    vue:['vue','vue-router'], // 第三方代码
    ui:['element-ui'] // 第三方代码
  },
  output:{
    path:path.join(__dirname,'./src/dll/'), //新建一个目录,存放dll文件
    filename:'[name].dll.js',
    library:'[name]', // 怎么引用打包好的第三方库
  },
  plugins:[
    new webpack.DllPlugin({
      path: path.join(__dirname,'./src/dll/','[name]-manifest.json'), // 打包后的dll文件放在位置及名称
      name:'[name]'
    }),
  ]
}

// webpack.pro.conf.js
plugin:[
    new webpack.DllReferencePlugin({
        manifest: require('./src/dll/ui-manifest.json')
    }),
    new webpack.DllReferencePlugin({
        manifest: require('./src/dll/vue-manifest.json')
    })
    ....
]

$_> webpack --config webpack.dll.conf.js
$_> webpack --config webpack.pro.conf.js

js文件中正常import 即可
  • UglifyjsWebpackPlugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
new UglifyJsPlugin({  parallel: true , cache: true}) //启用多线程和缓存
  • babel-loader:
 {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/, // 开启
      include: /js/,// 开启
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          cacheDirectory: true // 开启
        }
      }
    }
  • [使用happypack](
var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module: {
  loaders: [
    {
      test: /\.js[x]?$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader'],
    threadPool: happyThreadPool,
    cache: true,
    verbose: true
  })
]
  • 减少resolve
  • devtool: 去除sourcemap
  • cache-loader: 将loader处理的结果缓存起来
  • 升级node和webpack

相关文章

  • 基于webpack 3 打包性能优化

    基于webpack 3 打包性能优化 source Scope Hoisting. 过去 webpack 打包时的...

  • webpack打包优化

    实现webpack打包优化,有两个优化点: 如何减少打包时间 如何减少打包大小 减少打包时间 优化Loader对于...

  • React单页面应用项目 性能优化 实践

    react 单页面应用项目在加载优化这一块就得依赖webpack的打包方式。webpack的打包优化的本质就是将 ...

  • 浅谈webpack打包原理

    近来想要对旧项目进行优化,所以了解下webpack打包原理为优化做准备 webpack 4.x 打包文件 inde...

  • Webpack极限打包优化

    今天为了更好地了解一下Webpack打包优化的一些内容,看了一下NEXT公开课,Webpack打包极限优化,感兴趣...

  • Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨;当然,那些法子对于打...

  • 前端打包部署优化之gzip

    使用webpack打包出来的文件过大,导致访问速度极其慢,搜索webpack打包优化,能够看到很多前辈的建议:gz...

  • webpack 性能优化

    webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 优化调试功能 生产...

  • vue项目优化

    vue 项目优化 项目打包体积优化 通常vue项目通过webpack打包后,会出现vendor包的体积过大的情况,...

  • 2019-12-16 总结几个webpack打包优化的方法

    总结几个webpack打包优化的方法 为什么要优化打包? 项目越做越大,依赖包越来越多,打包文件太大 单页面应用首...

网友评论

      本文标题:webpack打包优化

      本文链接:https://www.haomeiwen.com/subject/ztqvoftx.html