问题背景:
前段时间,项目中的一些功能需要查看大量的业务数据且不分页造成页面table在数据量千条级别时页面就已经快卡死了。时不时的就会内存溢出了。于是就要优化。
在看解决方案的时候,DMap的解决方案映入了眼帘。技术专栏 | DMap——实战Vue百万条数据渲染表格组件开发
该组件采用了实时计算、虚拟渲染的方式,很好的优化了前端table在大量数据面前的孱弱表现。具体算法原理可参看上面的技术文章。但遗憾的是,该组件是用npm搭的前端web应用,没法直接用。
因为公司项目的前端采用的是vue.js+element-ui的架构,但,是传统的那种组织形式没有进行前后分离,意味着不能使用npm、ES6等。所以就必须使用webpack把该组件压成一个js文件,以<script>标签形式引入项目。正好github上有一个对vue-bigdata-table进行二次封装的组件,于是就打包拿来用了
但是,博客和github上的具体使用描述比较模糊,故自己记录一下使用过程及遇到的一些坑
预设环境:node.js -v10.13.0 npm -v6.4.1
第一步:首先,获取到项目实例--vue-element-bigdata-table github获取地址:vue-element-bigdata-table
第二步:按照README.md文件中的构建方式,npm install按照项目依赖后,使用npm脚本(封在了项目的package.json文件中,打开可以看到其实执行的是
cross-env NODE_ENV=production webpack --progress --hide-modules
)npm run dist进行生产打包。
报错:
ERROR in vue-element-bigdata-table.min.js from UglifyJs
Unexpected token: operator (>) [./node_modules/element-ui/src/mixins/emitter.js:2,0][vue-element-bigdata-table.min.js:13115,32]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vue-element-bigdata-table@1.3.1 dist: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vue-element-bigdata-table@1.3.1 dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\CPIC\AppData\Roaming\npm-cache\_logs\2018-11-24T04_31_09_618Z-debug.log
其实这个报错是指:不能解析">"这个语法token,位置呢,就在原项目的 ./node_modules/element-ui/src/mixins/emitter.js这个文件的2,0位置,压缩文件的vue-element-bigdata-table.min.js的13115,32这个位置,如果你打开这两个位置,你会发现代码其实是一模一样的。意味着webpack的babel转换器没有将报错的源文件的ES6语法转为ES5语法,怪不到会报错。
于是你需要在webpack.config.js文件的这个位置,将需要转换的js通过include也加进去,在此项目中就不要一个一个加了,看上面报错的文件是element-ui依赖的ES6语法原因,所以就整个都把element-ui文件下的所有文件都转了就ok了
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: [
resolve(__dirname, '../config'),//不加path可能会报resolve is not define
path.resolve(__dirname, '报错的文件'),
]
},
resolve是node.js中Path对象的一个方法,一般调用的话不用加Path.的,类似于js中不用加window对象一样。但不知道为什么就是不行,不过加上Path就ok了
第三步:将压缩成的vue-element-bigdata-table.min.js 引入项目使用即可。标签为<el-bigdata-table></el-bigdata-table>
哎,前端这几年这是变化大啊,是一种全新的开发和组织形式了。有一种2.0革命的感觉。各种新规范、新框架、小工具层出不穷。有时候很多名词都没听过,所以在一面用的过程中,再一面去了解。最后发现其实蛮简单的一个东西,自己去看新名词背后所包含的定义费了蛮久时间。也是有点类似中年贫穷的那种辛酸feel的~ 哈哈哈