zoukankan      html  css  js  c++  java
  • [Webpack 2] Grouping vendor files with the Webpack CommonsChunkPlugin

    Often, you have dependencies which you rarely change. In these cases, you can leverage the CommonsChunkPlugin to automatically put these modules in a separate bundled file so they can be cached and loaded separately from the rest of your code (leveraging the browser cache much more effectively).

    The libaraies like 'lodash', 'jquery' are required alomost all the projects and once download, rarly change any more. So it would be a good idea to spreate those common libaries into a common vendor file.

      entry: {
        app: './js/app.js',
        vendor: ['lodash', 'jquery'],
      },

    So rename the entry, add 'app' and 'vendor' entries.

    So the output file canbe named like 'bundle.app.js' and 'bundle.vendor.js':

      output: {
        filename: 'bundle.[name].js',
        path: resolve(__dirname, 'dist'),
        pathinfo: true,
      },

    We will use webpack build in CommonsChunkPlugin:

      plugins: [
        isTest ? undefined : new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
        }),
      ].filter(p => !!p),

    Now we can include those two bundle files into index.html:

        <script src="/bundle.vendor.js"></script>
        <script src="/bundle.app.js"></script>
  • 相关阅读:
    山丽防水墙客户端的卸载
    还原冰点密码清除
    STP学习总结
    NTFS权限设置时卡死
    SQL server 2000安装时“以前的某个程序安装已在安装计算机上创建挂起”
    Projecet客户端登陆无法通过验证
    Linux-nftables
    Linux-kernel-timeline
    blog编辑技巧
    Linux-swap
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5609140.html
Copyright © 2011-2022 走看看