优化对比 ： 未优化前：index.html引入一个main.js文件，体积2M以上。 优化后入：index.html引入main.js、commons.js、charts.js、other.js。以达到将main.js平分目的。每个文件控制300k以内.(如果高兴100k也没问题) 用到的一堆库及工具： vue、webpack、babel、highcharts、echarts、jquery、html2canvas******此去省略若干m代码 问题： 开发环境用webpack后发现单个js文件5m。 生产环境借助vue-cli的webpac...
前两天项目上线，用vue-cli npm run build命令打包，打包完成后我擦吓了一跳，15M。本来暂时不打算优化的，但是每次看着部署包这么大，想想还是先优化一下，让包好看点，免得以后出现心理阴影！在把 map文件干掉后，发现webpack这打包的速度，也忒感人了。在进行不自动生成 map文件设置时，有看到webpack自带的productionGzip功能，索性就一次性一起鼓捣鼓捣。 下面是瞎鼓捣历程，差点就鼓捣不出来了。1、在项目 根目录config/inde...
刚开始用webpack的同学很容易掉进图片打包这个坑里，比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里。下面我们就来分析下在webpack项目中图片的应用场景。1.CSS文件中的背景图等设置项目目录图：以下以我项目中的test.css为例 .test{color: red;width: 150px;height: 100px;overflow: hidden;background: url("../img/box@2x.png") no-repeat;background-size: 150px auto; } .img-base64{color: red;widt...
背景通常我们有一份webpack.dev.config.js使用webpack-dev-server的proxy，代理到开发服务器，来解决本地跨域问题。假如项目变大，可能需要proxy到不同环境，比如docker，或者后端开发人员的电脑上 现有问题 需要手动更改proxy配置，比较麻烦还容易写错改变后的config文件会被git检测到不小心将本地修改的配置push到远程仓库，对其他人造成困扰需求假如本地开发服务器是dev.xxx.cn，docker环境是docker.xxx.cn，服务端开发人员ip是...
环境：webpac<4的场景下，安装uglifyjs。 cnpm install uglifyjs-webpack-plugin -D安装完毕后，去npm里查看uglifyjs的使用方法并添加到代码中： const UglifyJsPlugin = require(uglifyjs-webpack-plugin)module.exports = {//...optimization: {minimizer: [new UglifyJsPlugin()]} };执行打包命令后报错，重新浏览文档后发现该写法只适用于webpack4，而我的环境是webpack3.x，于是更换了uglifyjs的写法： const UglifyJsPlugin ...
本人webpack版本3.6，webpack-dev-server版本2.9.1，本人按照网上写的版本折腾两天都没通，无意间自己试通了，猜测网上大部分都是照本宣科，没有自己实践 webpack配置接口地址代理在项目开发中，接口联调的时候一般都是同域名下，且不存在跨域的情况下进行接口联调，但是当我们在本地启动服务器后，比如本地开发服务下是 http://localhost:8080 这样的访问链接，但是我们的接口地址是 http://www.xxx.com/save/post 这样的，我们这...
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示。 解决办法如图： (1).修改 assetsPublicPath: ./ (2).打开webpack.prod.conf.js，在output：增加 publicPath: ./虽然解决了资源路...
关于webpack dll的使用，我这里不做过多介绍，网上都有，一撸一大把，今天我要说的是在使用dll plugin过程中出现的一个包依赖问题，这个问题导致打出来的包会包含重复的代码。 优化背景 最近在给公司项目优化的时候，由于 内部CDN上传文件大小限制了500K ，所以用了webpack dll来进行拆分打包，我将拆分的包分为三部分： vue生态包（ vue 、 vuex 、 vue-router 、 vuex-class 、 vue-class-component 等周边生态的库）vue插件包（...
使用vue init webpack 创建vue项目时报如下错误： vue init webpack my-projectC:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:374:25) at Object.Module._extension...
原因： css-loader后面带了参数modules(打包报错) url-loader后面带了参数name(引入报错) {test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-loader?modules!postcss-loader"}) }, {test: /\.(svg|ttf|eot|woff)\??.*$/,loader: "url-loader?limit=10000&name=fonts/[name].[ext]" }解决方案：去掉参数 {test: /\.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: "css-l...
vue +webpack 项目中数据更新后页面没有刷新问题，ie11下，如果GET请求请求相同的URL，默认会使用之前请求来的缓存数据，而不会去请求接口获取最新数据，我用的解决方法是在每个请求发送前，拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同，ie11就会不断的请求接口而不使用缓存数据。 代码如下if(config.url.indexOf(?)>-1){config.url = url + config.url +"×tamp="+get...
vue项目，访问打包后的项目，输入路径后，页面加载空白。这时会有两类问题，都是路径问题。 1.一个是css,js,ico等文件加载不到，是目录里少了dist 打开页面时一片空白解决办法： config/index.js文件的build->assetsPublicPath的默认值改为 ./ assetsPublicPath：资源的根目录。这个是通过http服务器运行的url路径。因为webapp和static中间还有层dist,所以要用./2.另一个就是单纯的在背景图使用相对路径导致加载不到图片 例如登录页...
vue cli搭建的项目，在本地测试调试都OK，运行npm run dev之后运行正常，今天放到服务器上跑，结果RD说找不到打包后的静态资源，浏览器控制台错误代码404 问了RD，因为服务器上线方式的调整，不会指定具体项目路径因此，https://bigdata.yiche.com/static/css/app.149f36018149fcbe537f02cafdc6f047.css 这个文件找不到，看看我们正常打包好的目录：正确的访问路径是：https://bigdata.yiche.com/deploy/static/css/app.149f360181...
问题是这样的，我使用webpack的npm run dev运行的时候，keep-alive路由缓存是有效的，但是我npm run build，把文件放到实际的项目中去的时候，会有如下的问题： 路由如下： var menus = [{path: /user,name: 用户,component: /user,redirect: /user/index1,icon: fa-bandcamp,meta: {keepAlive: false},children: [{ path: index1, component: /user/index1, name: 用户管理1, meta: {keepAlive: true}},{ path: index2, component...
最近在项目开发过程中遇到如下问题：开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图：打开控制台查看元素样式，发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号，但使用webpack打包以后，"微软雅黑"的双引号被错误解析并多加了个反斜杠，导致字体不生效。解决方法： 尝试了一下去掉双引号，也就是font-family:微软雅黑，这样浏览器并不会把中文字体用unicode编码，样式也可以正常显示。但为了...