最直接的效果是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模板文件