库文件太大,webpack打包时怎么办

针对上篇gojs太大的问题的衍生出大文件打包的问题javascript

exclude 设置不经过babel-loader编译的目录

写成从node_modules导入的,就不会出现run慢或者报错,还很快。这是为何?
是由于node_modules里面不会再实时编译了
那有没有方法,webpack能够设置一些不实时编译的文件html

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src')],
        exclude:[
          resolve("src/components/common/gojs")
        ]
      },

exclude能够排除目录 ,不用babel-loader编译java

库很大,要么分包 ,或异步加载,或单独引入,不然生成环境打的包会很大node

externals设置不打包的文件

打包的时候不打包这个,而后须要在生产环境页面单独引入这个scriptwebpack

externals:{
    'go':'go'
}
<script type="text/javascript" src="./static/js/go.js"></script>

add-asset-html-webpack-plugin

add-asset-html-webpack-plugin,能够配置修改打包后的index.html.
在webpack.prod.config中引入并添加,用法以下:web

new AddAssetHtmlPlugin({
    filepath:path.join(__dirname,'src/components/common/gojs/go.js'),
    outputPath:'./static/js',
    publicPath:'./static/js',//script标签中的路径前缀
    includeSourcemap:false
})

打包后结果以下:babel

</div></div>
<script type="text/javascript" src="./static/js/go.js"></script>

CommonsChunkPlugin分包,HtmlWebpackPlugin插入

分包等的时间久点app

var chunks = ['manifest', 'vendor', 'gojs', 'app'];
new webpack.optimize.CommonsChunkPlugin({
      name: 'gojs',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /go\.js$/.test(module.resource) === 0
        )
      }
    }),
 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunks,
      chunksSortMode: function(a, b) {
        return chunks.indexOf(a.names[0]) - chunks.indexOf(b.names[0])
      },
    }),
相关文章
相关标签/搜索