webpack 的异步组件 生成commonchunks

 1     new webpack.optimize.CommonsChunkPlugin({
 3       async: ‘async-common‘,
 4       minChunks: function (module, count) {
 5         // any required modules inside node_modules are extracted to vendor
 6         return (
 7           count >= 2
 8         )
 9       }
10     })

上述代码是将异步组件的公共组件打包到async-common中,但是build后通过 Webpack Bundle Analyzer 查看,发现并无效果.

正确配置如下:

    new webpack.optimize.CommonsChunkPlugin({
      names: Object.keys(utils.getEntries()),
      async: ‘async-common‘,
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          count >= 2
        )
      }
    })

  如上边代码,需要添加name或者names,此选项为entry的名字,因为我是多页面且多个入口,所以使用names, 通过Object.keys(utils.getEntries()) 获取我全部的入口名

时间: 2024-11-05 22:36:58

webpack 的异步组件 生成commonchunks的相关文章

在Java Web Project中实现Vue异步组件加载

背景 最近看上了ElementUI(Vue实现)用来实现一个管理系统Demo,其中一个最常见的需求就是左侧导航不动,右侧主页块在点击导航菜单时动态更新,如下图所示:之前的实现方案是右边嵌入一个iframe,动态更改iframe的url即可,现在既然用了Vue咱也试试单页,是不是显得更优雅.接着就接触到了vue-router.组件.异步组件这些关键字,本以为把页面定义为xxx.vue放到webapp下,然后告诉vue-router去加载就好了,最后发现自己想简单了,思维模式还停留在Java Web

Vue动态加载异步组件

背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品.目前都是采用iframe直接嵌套页面.项目中我们还是会碰到一些通用的组件跟业务之间有通信,这种情况下iframe并不是最好的选择,iframe存在跨域的问题,当然是postMessage还是可以通信的,但也并非是最好的.目前有这么一个场景:门户需要制作通用的首页和数据概览页面,首页和数据概览页面通过小部件来自由拼接.业务组件在制作的时候只需要提供各个模块小部件的url就可以了,可是如果小部件之间还存在联系呢?那么iframe是不好

vue异步组件和vue.router异步加载

以前在使用angular进行开发时,始终没有处理好异步加载的问题,最多只能使用requirejs异步加载controller里面的内容.导致后来项目扩大的时候,性能问题十分蛋疼.最后我竟然把单页面引用拆成了多页面应用,感觉好囧... 后来尝试用vue写一个项目,配合则webpack,发现效果相当的好.但是vue的异步组件文档太误导人了,让我尝试了好久才发现怎么用.文档上是这样写的: Vue.component('async-webpack-example', function (resolve)

Vue动态组件&异步组件

在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题. 如上是vue官网的例子,你会注意到如果你选择一篇文章,切换到Archive标签,然后切回Posts, 是不会继续展示你之前选择的文章的.因为你每次切换新标签的时

vue异步组件

路由懒加载 当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载.如: const Foo = () => import('./Foo.vue') 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块.为了简化,Vue 允许你以一个工

VueJS 如何编译服务器端远程模板【异步组件+简单方法】

说明 有些时候你可能需要从后台获取模板,并在前台在自己编译,这在用 AngularJS 1.x 的时候似乎很常见,可以直接用 ng-include 搞定,在 Vue 1.x 的时候也可以直接用 partial 搞定.但是在 Vue 2.x 中,官方取消了 partial 这个 API,根据情况推荐使用 component 代替,参见这里 需求 那我现在有个需求,就是从后台获取一个字符串模板(假设里面包含 v-model 等 vue 指令),模板需要拿到前台来编译,那该怎么实现呢?(这种需求确实比

vue 异步组件

路由懒加载 当打包构建应用时,Javascript 包会变得非常大,影响页面加载速度.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载.如: 1 const Foo = () => import('./Foo.vue') 异步组件 在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块.为了简化,Vue 允许你以一

JXL组件生成报表报错(二)

JXL组件生成报表 1.具体报错如下: usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help | start | stop } 2014-5-3 23:10:18 org.apache.catalina.core.AprLifecycleListener init 信息: Loaded APR based Apache Tomcat Native library

ETL工具kettle的组件--生成记录

今天介绍下kettle的一个比较实用的组件--生成记录:当我们想将一部分文本数据变成数据行,每个字段作为一个数据行的一个列,那么我们可以利用这个组件:它的位置在双击点开根据自己的实际需要进行设置当设置后,可以点击预览,上面的[限制]选项就是行的数量:其中 有三个选项是必填项--名称,类型,值 原文地址:http://blog.51cto.com/13602563/2170365