最直接的效果是js源文件的变下了，下载源文件的速度大大缩短，相当于加载速度更快了。还有一个隐形好处是别人不能破解你的js代码，因为加密混淆的js代码十分难懂。用nodejs也可以对js加密混淆，但要用cmd命令操作。
‘贰’ 如何用sublimeText3编写less并用Nodejs自动编译成css
1、安装Sublime 插件
（1）安装LESS插件：
因为Sublime不支持Less语法高亮，
所以，先安装这个插件，
方法1： ctrl+shift+p>install Package>输入less按Enter
方法2：直接下载后 解压文件 放到插件文件夹下（首选项-浏览插件 打开文件夹）
下载地址：https://github.com/danro/LESS-sublime
（2）安装LESS2CSS插件：
less2css的读音 其实就是less to css
这个插件的作用是
当保存less文件的时候自动生成同名的css文件；
当保存less文件的时候提示编译错误信息；
批量编译项目目录下的所有less文件为css文件。
安装：
方法1：ctrl+shift+p>install Package>输入less2css按Enter
方法2：直接下载：https://github.com/timdouglas/sublime-less2css
解压文件 放到插件文件夹下
但是我们还要让sublime支持less并自动编译，所以还需以下步骤：
2、安装Node.js
首先先配置一下环境，
less需要nodejs支持，
所以我们先要安装一下nodejs
到nodejs官网下载就可以了：https://nodejs.org/en/
3、安装less
运行-cmd：
输入命令行：
npm install less -g
-g 代表着全局安装less
之后在 Sublime 里面建less文件时，会有一个错误
LESS: Unable to interpret argument clean-css
这是因为还需要一个插件
less-plugin-clean-css插件的安装
命令行为：
npm install less-plugin-clean-css -g
接着重启一下sublime，就搞定啦！
‘叁’ 网站优化:所有的js代码放到同一个js文件中好，还是不同的页面根据需要创建不同的js文件好
网站优化：一个是压缩合并css，js，一个是合并图片和小图标来达到减少请求量的目的；所以当然是所有的js代码放到同一个js文件中好；需要注意的是：
1、只要命名不冲突放一个文件里面完全没问题,初始化代码用一个$(function(){...})包裹着就可以了；
2、不同的页面执行不同的逻辑代码块完全不冲突,关键是知道自己在做什么；
具体做法：
1）比如a.css,b.css,c.css,把里面的内容都复制到一个css中，main.css这样手动就可以合并
压缩的话，网上都有工具来压缩，直接网络 css压缩 就可以了;
2）js大部分是可以直接和css一样手动合并，然后压缩的（压缩方法，和压缩css一样，网络去），不过要注意复制到文件时的顺序，和代码里面的一些规范，不要把依赖什么的搞混了；如果js文件非常多手动处理很麻烦的时候，可能需要借助工具来实现，你可以试着用前端的一些加载器（require,seajs）来做一些优化，达到按需加载的目的，推荐用seajs试试；自动压缩的话，可以用nodejs的grunt来压缩，很好用。
‘肆’ 网页页面优化如何合并JS
网站优化，一个是压缩合并css，js，一个是合并图片和小图标来达到减少请求量的目的
合并css和js这个很简单
比如a.css,b.css,c.css
把里面的内容都复制到一个css中，main.css这样手动就可以合并
压缩的话，网上都有工具来压缩，直接网络 css压缩 就可以了
js的话，大部分是可以直接和css一样，手动合并，然后压缩的（压缩方法，和压缩css一样，网络去），不过要注意复制到文件时的顺序，和代码里面的一些规范，不要把依赖什么的搞混了
如果js文件非常多手动处理很麻烦的时候，可能需要借助工具来实现，这个，你可以试着用前端的一些加载器（require,seajs）来做一些优化，达到按需加载的目的，推荐用seajs试试
自动压缩的话，可以用nodejs的grunt来压缩，很好用
‘伍’ nodejs+express 怎么引入css文件
define(["require"], function(require) {
var cssUrl = require.toUrl("./style.css");
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = cssUrl;
document.getElementsByTagName("head")[0].appendChild(link);
});
require有个text组件的.引用组件后.define中只要text!css/style.css就可以引用引用css文件就可以了.也可以引用html模板文件
‘陆’ 如何利用node进行js css合并压缩
gulp是基于Node.js的前端构建工具。所以首先需要安装nodejs，安装nodejs。
完成nodejs安装之后，需要使用npm安装gulp。
先安装全局gulp
npm install -g gulp然后在项目根目录下安装本地gulp。
此时项目根目录下会多出下面这个文件夹 node_moles
好的，现在gulp已经安装完成了，但是gulp本身不提供js压缩合并等功能，需要使用gulp的相关插件。目前只需要完成js压缩合并和css文件压缩的功能，先安装相应的插件：
1.css压缩 gulp-minify-css
2.js压缩 gulp-uglify
3.js合并 gulp-concat
由于压缩之前需要对js代码进行代码检测，压缩完成之后需要加上min的后缀，我们还需要安装另外两个插件：
‘柒’ webpack打包的CSS含有两个相同的引入
1. 摘要
Webpack是一种前端资源构建工具，一个静态模块打包器。在Webpack看来，前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理，当Webpack处理应用程序时，它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源。Webpack打包流程图如图1-1所示。
想了解Webpack，看这篇就够了
图1-1 Webpack打包流程图
2. Webpack五个核心概念
2.1 Entry
入口(Entry)指示Webpack以哪个文件作为入口起点分析构建内部依赖图并进行打包。
2.2 Output
输出(Output)指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
2.3 Loader
Loader让Webpack能够去处理那些非JavaScript语言的文件，Webpack本身只能理解JavaScript。
2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务，插件的范围包括从打包和压缩，一直到重新定义环境中的变量等。
2.5 Mode
模式(Mode)指示Webpack使用相应模式的配置。分为development和proction两种模式，下面分别进行简述。
development: 开发模式，能让代码本地运行的环境，会将process.env.NODE_ENV的值设为development，同时启用NamedChunksPlugin和NamedMolesPlugin插件；
proction: 生产模式，能让代码优化运行的环境，会将process.env.NODE_ENV的值设为proction，同时启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、MoleConcatenationPlugin、NoEmitreplaceStringsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin插件。
3. Wbepack配置
3.1 webpack.config.js文件
webpack.config.js是webpack的配置文件，用来指示webpack工作，运行webpack指令时，会加载里面的配置，所有构建工具都是基于nodejs平台运行的，默认采用commonjs模块化。webpack.config.js基础配置如图3-1所示。
想了解Webpack，看这篇就够了
图3-1 webpack.config.js基础配置
3.2 devServer配置
开发服务器(devServer)用来实现自动化(自动编译、自动打开浏览器、自动刷新浏览器)，只会在内存中编译打包，不会有任何文件输出，本地安装webpack-dev-server后，通过npx webpack-dev-server命令启动devServer，核心代码如图3-2所示。
想了解Webpack，看这篇就够了
图3-2 devServer配置核心代码
3.3 打包html/样式/图片/其它资源
打包不同的资源会使用不同的loader和插件，打包html/样式/图片/其它资源的流程如下所述。
3.3.1 打包html资源
1.下载html-webpack-plugin插件；
2.引入html-webpack-plugin插件；
3.使用html-webpack-plugin插件，并进行相应配置。
3.3.2 打包样式资源
不同的样式文件需要配置不同的loader
1.下载loader；
2.配置loader，css样式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。其中css-loader的作用是将css文件变成commonjs模块加载到js文件中，style-loader的作用是创建style标签，将js中的样式资源插入进去，添加到head中生效。
3.3.3 打包图片资源
1.下载url-loader，file-loader
2.配置loader
3.3.4 打包其它资源
1.下载file-loader
2. 配置loader，配置该loader作用于不为html/css/less/js的其他文件
3.4 提取css成单独文件/css兼容性处理/压缩css
3.4.1 提取css成单独文件
样式文件打包后会默认和js文件一起输出，可以通过插件将打包后的css文件单独输出，流程如下所述。
1.下载mini-css-extract-plugin插件
2.引用该插件
3.配置
3.4.2 css兼容性处理
1.下载postcss-loader和postcss-preset-env
2.在package.json中browsetslist属性中分别对开发环境和生产环境进行兼容性配置，设置支持样式的浏览器版本
3.通过postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式。
3.4.3 压缩css
1.下载optimize-css-assets-webpack-plugin插件
2.引用该插件
3.使用该插件
3.5 js语法检查eslint/js兼容性处理/js压缩
3.5.1 js语法检查eslint
1.下载eslint-loader和eslint
2.在package.json中的eslintConfig中进行配置
3.配置eslint-loader，其中只需检测js文件并要排除第三方库，只检测自己写的源代码，同时可在options配置中设置fix:true，自动修复eslint的错误。
3.5.2 js兼容性处理
1.下载babel-loader、@babel/core、@babel/preset-env，通过@babel/preset-env做基本的js兼容性处理，然后通过corejs做前面无法实现的兼容性处理，并实现按需加载
2. 配置loader
js兼容性处理核心代码如图3-3所示
想了解Webpack，看这篇就够了
图3-3 js兼容性处理核心代码
3.5.3 js压缩
mode设置为proction生产环境时会自动压缩js代码。
4. webpack性能优化
可以从开发环境和生产环境分别对webpack进行性能优化。其中开发环境主要考虑从打包构建速度和代码调试两个方面进行优化，生产环境主要考虑从打包构建速度和代码运行性能这两个方面进行优化。下面简单介绍下开发环境上通过HMR提升构建速度。
4.1 HMR
HMR(热模块替换)，作用是一个模块发生变化后，只会更新打包这一个模块而不是所有模块，通过在devServer中设置hot:true属性启动HMR功能。
其中对于样式文件，可以使用HMR功能，因为style-loader内部实现了；
对于js文件，默认不能使用HMR功能，解决方法：修改入口文件js代码，添加支持HMR功能的代码，另外HMR只能处理非入口js文件的其他文件，对入口文件并不能生效，因为一旦入口文件更新，入口文件引入的其他文件一定会被重新加载；
对于html文件，默认不能使用HMR功能，同时会导致html文件不能热更新，解决方法：修改entry入口文件，将html文件引入，只能解决html文件不能热更新的问题。
‘捌’ nodejs 怎么引入css文件
define(["require"], function(require) {
var cssUrl = require.toUrl("./style.css");
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = cssUrl;
document.getElementsByTagName("head")[0].appendChild(link);
});
require有个text组件的.引用组件后.define中只要text!css/style.css就可以引用引用css文件就可以了.也可以引用html模板文件