码上敲享录 > vue.js常见问题详解 > webpack多页面入口导致编译很慢问题

webpack多页面入口导致编译很慢问题

上一章章节目录下一章 2020-07-28已有1447人阅读 评论(0)

webpack多页面入口导致编译很慢问题


解决方法:

先在build/webpack.dev.conf.js或者build/webpack.prod.conf.js引入CommonsChunkPlugin

const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");


再添加plugins中添加两个CommonsChunkPlugin,manifest和vendor,并在你的自定义页面模块引入'manifest','vendor',例如下面HtmlWebpackPlugin中的chunks: ['manifest','vendor','uptocomtest']

plugins: [


      new CommonsChunkPlugin({

          name: 'vendor',

     minChunks: function (module, count) {

       // any required modules inside node_modules are extracted to vendor

       return (

         module.resource &&

         /\.js$/.test(module.resource) &&

         module.resource.indexOf(

           path.join(__dirname, '../node_modules')

         ) === 0

       )

     }

       }),

     new CommonsChunkPlugin({

          name: 'manifest',

         chunks: ['vendor'],

       }),

new HtmlWebpackPlugin({

     favicon:"src/assets/images/favicon.ico",

     filename: 'designer/uptocomtest.html',

     template: 'src/designer/uptocomtest.html',

     inject: true,

     multihtmlCache: true,

     chunks: ['manifest','vendor','uptocomtest'],

   }),


    ],

我如果不加这些配置编译要4分钟,加了之后只需1分30秒,如果还要优化就要把页面的共用js或者css抽取出来使用类似的方法引入


0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交