Projetos anteriores foram construídos usando Grunt e, em seguida, usados requeremjs para fazer modular. O OFICIAL DE TEMBRAJS fornece plug-in Grunt para compressão e fusão. O projeto atual atingiu o Gulp e usa o SEAJS em modularidade, então, naturalmente, também pensei no problema da fusão e compressão do módulo.
Então, quando resolvi esse problema pela primeira vez, não foi muito suave. Não havia plug-in de gole particularmente popular para a fusão e compressão do SEAJs no NPM. Embora eu também tenha lido muitos problemas no Seajs Github, a maioria deles só pode mesclar todos os arquivos do módulo em um arquivo total. Definitivamente, isso não tem problema para aplicativos de uma página. No entanto, para aplicativos de várias páginas, obviamente viola o núcleo de carregamento sob demanda na idéia de modularidade; portanto, o que eu quero é um método que pode mesclar sob demanda com base nos módulos dos quais cada página depende.
O significado dessa mesclagem sob demanda é que, por um lado, mescla apenas os módulos dos quais uma página depende e, por outro lado, também pode filtrar alguns módulos que não participam da mesclagem. A razão para considerar isso é que alguns módulos, como o jQuery, são todos bibliotecas dependentes de terceiros e podem ter um arquivo grande. O mais importante é que você dificilmente altere seu código; portanto, se esses módulos não forem mesclados no JS da página, ajudará a utilizar melhor o cache do navegador. Este artigo apresenta um método simples e viável para fazer a compressão do SEAJS em projetos pequenos e médios construídos no Gulp.
Nota: Para ilustrar o efeito da mesclagem do SEAJS, este artigo fornece uma demonstração de demonstração, que possui duas páginas: Login.html e Regist.html, que são usadas para simular dois arquivos independentes em aplicativos de várias páginas. Você pode visualizá -lo através do seguinte link:
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
Tomando login.html como exemplo, ao visualizar o arquivo de origem desta página, você verá que, além de se referir a Seajs e arquivos de configuração relacionados Common.js, ele apenas faz referência ao aplicativo/login como o principal js da página. Este módulo de aplicativo/login corresponde à js/app/login.js:
Mas, de fato, este login.js conta com mais módulos JS e você pode visualizar os recursos JS detalhados carregados por esta página através da fonte do Chrome:
Antes da mesclagem do login.js, seu código parecia o seguinte:
No entanto, nas duas primeiras capturas de tela, não vimos os três arquivos: mod/mod1.js, mod/mod2.js, deps/fastClick.js. Além do login.js, também vimos lib/bootstrap.js, lib/jquery.js, lib/jquery.validate.js. Este é o efeito da fusão. Por um lado, os módulos sob a pasta JS/LIB não participarão da fusão. Por outro lado, por outro lado, os outros módulos dos quais os principais js da página dependem são mesclados no arquivo JS principal da página.
O código relacionado a esta demonstração pode ser visto através do seguinte link:
https://github.com/liuyunzhuge/blog/tree/master/seajs
1. Mesclar idéias
De fato, o método é relativamente simples, eu o apresentarei no final.
1) Deixe -me falar primeiro sobre uma estrutura de pastas que eu organizo o módulo SEAJS, que é assim:
Essa estrutura é emprestada do requentJS e tente achatar a organização de arquivos, que não deve ser muito problemática para projetos de front-end de pequeno e médio porte. As funções de cada pasta são:
1) JS/App armazena o JS principal de cada página, basicamente a lógica de uma página e um JS
2) JS/DEPS armazenam módulos de terceiros que precisam ser mesclados no JS principal
3) JS/LIB armazena módulos de terceiros que não precisam participar da fusão
4) JS/MOD armazena alguns módulos JS escritos por si mesmos em cada projeto
5) Common.js é o arquivo de configuração do SEAJS.
2) em Common.js, todos os módulos sob JS/lib são configurados na opção de alias, porque esses JS não participam da mesclagem e precisam ser usados no cache do navegador. O alias pode facilitar a atualização dos endereços de carregamento desses arquivos ao modificar ou atualizar os arquivos no JS/LIB:
A base é configurada para a pasta JS. No desenvolvimento do módulo, quando quero exigir outros módulos, meu hábito é escrever identificadores de módulos como MOD/MOD1 diretamente sem identificação relativa. Mesmo que o módulo ao qual o módulo seja definido exista na mesma pasta que ele, é também por isso que defino o diretório base para a pasta JS, que é um pouco semelhante ao diretório raiz do site.
3) Idéia de mesclagem: Utilize principalmente os dois plug-ins Gulp: Gulp-Seajs-transport e Gulp-Seajs-Concat. Embora não sejam muito populares no Github, eles resolveram bem meu problema e são muito simples de usar:
(Para mais conteúdo, você precisa verificar o link do código -fonte fornecido no início deste artigo para encontrar o arquivo relevante gulpfile.js)
Gulp-Seajs-Transport pode ajudá-lo a transformar arquivos do módulo SeaJS de módulos anônimos para módulos nomeados. Por exemplo, JS/Mod/Mod1.js se parece com isso antes de construir:
Mas após o processamento do transporte, ele se tornará:
Este é um ponto mais crítico no trabalho de mesclagem do SEAJS. Não é como requerjs, basta concatar diretamente; Ele deve primeiro ser processado por uma tarefa de transporte, transformar o módulo anônimo em um módulo nomeado e usar o segundo parâmetro de definir para descrever todas as dependências deste módulo, assim como requerjs. Somente após a conclusão do transporte pode ser usada para serem usadas para mesclar. Por razões, consulte: https://github.com/seajs/seajs/issues/426.
Quando o CONCAT GULP-SEAJS é mesclado, é muito simples. Basta dizer uma opção base. Esta opção base é consistente com a opção base no JS/Common.js. Como o Gulp-Seajs-Concat pode encontrar outros arquivos de módulo, depende com base nos módulos após a base e o transporte.
4) Este método deve ser usado ao usar JS principal na página:
O nome do parâmetro de uso deve ser consistente com o ID do módulo principal do JS principal mesclado. Por exemplo, após a mesclagem js/app/login.js, parece o seguinte:
O primeiro módulo correspondente é o módulo principal no arquivo mesclado. O conteúdo da caixa vermelha é o ID do módulo principal. Quando os SEAJs usam o módulo, o nome do parâmetro deve ser o mesmo que este ID. Caso contrário, mesmo que o SEAJS carregue com sucesso esse arquivo, ele não executará nenhum código no módulo. Como o SEAJS tem uma regra: o princípio de correspondência de ID e caminho, que está um pouco relacionado a isso, ou seja: quando o SEAJS usa para conter vários módulos em um arquivo, o módulo principal neste arquivo será encontrado de acordo com o nome do parâmetro do uso. Somente quando eles combinam exatamente, eles podem ser encontrados.
5) OBFUSCAÇÃO DE COMPRESSÃO: Use Gulp-uplify:
Mas, para prestar atenção ao Mangle, você deve excluir o módulo de exportação de necessidade, caso contrário, causará alguns problemas inesperados.
2. Resumo deste artigo
Embora o conteúdo deste artigo seja muito simples, demorou muito tempo para resolver o problema deste artigo quando eu cortei o Gulp e o Seajs. Embora o progresso tenha sido muito mais suave do que a minha situação naquela época em que eu estava me preparando para a demonstração ... não importa o quê, espero que o conteúdo deste artigo possa ajudar alguns amigos mais ou menos.