Webpack 3 - 打包优化

2019-08-27 本文已影响0人 zsanpang

随着项目复杂程度的增加，代码打包的耗时也越来越长，于是我想结合实际开发环境提升一下首次打包的速度。
目前项目中使用的打包压缩工具是webpack默认的UglifyJS插件，它使用的是单线程压缩代码，也就是说当多个js文件需要被压缩时，它需要将文件一个一个进行压缩。因此在正式环境中打包压缩代码就显得非常慢。最后使用一下几种方法来优化项目文件（基于webpack3）。

1、使用HappyPack多进程解析和处理文件

由于有大量文件需要解析和处理，所以构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack构建慢的问题会显得更为严重。运行在 Node.之上的Webpack是单线程模型的，也就是说Webpack需要一个一个地处理任务，不能同时处理多个任务。Happy Pack ( https://github.com/amireh/happypack ）就能让Webpack做到这一点，它将任务分解给多个子进程去并发执行，子进程处理完后再将结果发送给主进程。

    1）HappyPack插件安装：
    $ npm install -D happypack
    2）对文件webpack.base.conf.js 引入
    const HappyPack = require('happypack');
    const os = require('os');
    const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
    plugins: [
       new HappyPack({
      // 用id，来代表当前的HappyPack是用来处理一类特定的文件
      id: 'babel',
      // 如何处理.js文件，用法和Loader配置中一样
      loaders: [{
        path: 'babel-loader',
        cache: true,
      }],
      // include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
      threadPool: HappyPackThreadPool,
    }),

    new HappyPack({
      // 用id，来代表当前的HappyPack是用来处理一类特定的文件
      id: 'vue',
      loaders: [
        {
          loader: 'vue-loader',
          options: vueLoaderConfig
        }
      ],
      threadPool: HappyPackThreadPool,
    }),
    ],
    module: {
     rules: [
      {
        test: /\.js$/,
        // 将对.js 文件的处理转交给 id 为 babel 的HappyPack实例
        use: ['happypack/loader?id=babel'],
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        // 排除第三方插件
        exclude: path.resolve(__dirname, 'node_modules'),
      },
      {
        test: /\.vue$/,
        use: ['happypack/loader?id=vue'],
      },
      ]
    },

2、使用cdn优化依赖包的体积

日常开发过程中，前端这块早就已经开始进行工程化和组件化开发了，所以免不了下载各种node包，使得打包后的体积也是非常的庞大，下面使用webpack的一个配置外部扩展就可以解决这类问题

1)  在index.html中引入cdn，可以使用国内的bootcdn服务
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.11.1/index.js"></script>
2) 在webpack.base.conf.js 配置externals，externals与output同级，属性是包暴露出的方法名称，后面的值是你在项目中使用的名称
    externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex': 'Vuex',
    'element-ui': 'ELEMENT',
    'axios': 'axios',
  },
3）在router.js配置，把Vue注释或者删除
// import Vue from 'vue';
import VueRouter from 'vue-router';
import index from 'views/index';
// Vue.use(Router);
4）在main.js注释掉引用的element，可以使用按需引入element
// 按需引入
import {
  Loading,
  Message,
  MessageBox,
  Notification,
} from 'element-ui'
// 按需使用
Vue.use(Loading.directive)
// 挂载到vue实例上面
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification,

3、使用ParallelUglifyPlugin多进程压缩代码文件

// 在webpack.prod.conf.js文件配置
// ParallelUglifyPlugin插件安装：
   $ npm i -D webpack-parallel-uglify-plugin
  const ParallelUglifyPlugin =require('webpack-parallel-uglify-plugin');
  plugins: [
      new ParallelUglifyPlugin({
        cacheDir: '.cache/',
        uglifyJs:{
          compress: {
            warnings: false,
            drop_debugger: true,
            drop_console:true,       // 打包移除console
            pure_funcs: ['console.log']
          },
          sourceMap: config.build.productionSourceMap,
        }
       }),
  ]

4、Gzip压缩和sourceMap优化

// 在webpack的build文件中，开启Gzip压缩功能和禁用资源地图。打包以后就不会再有sourceMap文件了，也会多了几个以.js.gz后缀名的文件
module.exports = {
  // ...
  build: {
    productionSourceMap: false,
    productionGzip: true,
  }
}

5、路由异步加载可以帮助我们根据路由来按需加载。它的原理是使用了import() 而非 import 是因为 import 是静态编译，而import() 同 require，是可以进行动态加载的。但是千万要注意的是，引用过程中千万不要使用变量，这会导致编译通过但是编译时间长得令人发指又或者直接内存溢出。

// 使用require方法
const example = resolve => require(['../components/index.vue'], resolve);

优化效果

打包时间

打包前
打包后

打包体积

打包前
打包后

到此进行了部分的webpack优化，剩下的问题，都是根据个人需求来处理。因为是基于webpack3进行优化，有些功能没有实现。原本设想是升级到 webpack4 的，过程不算太顺利，过多的依赖升级错误只能放弃，但是升级到 webpack4，尝试一下说不定就成功，毕竟 webpack4 进行了多处优化，一些存在安全问题的依赖包也得到解决了，后期会升级到webpack4的。最后还需要提醒大家一点，本篇文章中的例子仅供参考学习，切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

Webpack 3 - 打包优化

1、使用HappyPack多进程解析和处理文件

优化效果

猜你喜欢

热点阅读