最近做的一个项目，因涉及到3D的部分功能，由于公司没有这方面经验的人，同是项目比较赶。领导将这部分业务外包给了一个公司做。 这块功能用的是`three.js`做的，在本公司的的项目里用了`iframe`引入。所以自己项目的webpack也没有对这部分压缩和转码。 要上线的时候突然发现甲方公司那里的流览器打不开3D这一块。跟根错误发现是3D的业务代码没有进行babel转换。 涉及到

# vue+webpack 前端性能优化 [](https

# [webpack 与 vue 打包体积优化](https://www.cnblogs.com/daysme/p/9887916.html) **文章目录** - **[思路](https://www.cnblogs.com/daysme/p/9887916.html#_label0)** - **[组件按需加载](https://www.cnblogs.com/daysm

瘦子先生 瘦子小先森 6月16日 前言： webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。 安装  

彻底理解并解决 'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件 一、问题描述 二、分析原因 三、解决方案 四、方案对比   一、问题描述 在安装 npm 包模块的时候，不管是 Webpack 、React 还是 Vue，都需要全局安装，即执行 npm install webpack -g 或者 npm

gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。 本文导航： 1. gulp的安装 2. 开始使用gulp 3. gulp的API介绍

  jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！ 1. 前言 各位web前端开发人员，如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt，那你就真的真的真的out了（三个“真的”重复，表示重点）。至于grunt的作用，这里不详细说了，总之你如果做web前端开发，你一定要用grunt。还有一

Gruntfile.js详解 使用yeomen新建一个项目，里面会自动帮你创建一个完整项目的全部目录，这里针对新建出来的Gruntfile.js做一下简单说明，用作以后参考使用，由于还是菜鸟，很多东西没有使用过，所以就不做过多的解释，等以后有了一定的理解再做补充 网址 在线API中文版 time-grunt与jit-grunt time-grunt&nb

  grunt.initConfig方法 用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。 每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下： expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。 cwd：需要处理的文件（input）所在

```js 'use strict'; module.exports = function(grunt){ require("load-grunt-tasks")(grunt); require("time-grunt")(grunt); var config = { app:"app", dist:"dist"

grunt 是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于： ① 压缩文件 ② 合并文件 ③ 简单语法检查 对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件，初学，有误请包涵 准备阶段 1、nodeJs环境 因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境，这块我们便不管了 http://www.c